Home > Web Front-end > JS Tutorial > body text

What you must know about TypeScript

php中世界最好的语言
Release: 2018-03-13 16:15:40
Original
2092 people have browsed it

This time I will bring you what you must know about TypeScript. What are the precautions when using TypeScript? Here are practical cases, let’s take a look.

Comparing Angular2 to Angular1 is like Java and Javascript. Because of the huge changes, AngularJS is used to represent version 1.x, while Angular represents 2.x, 4.x, and 5. x and other subsequent versions. Refer to "Angular Authoritative Tutorial" to record the history of the Angular family. This article introduces TypeScript.

Original link

TypeScript

Angular is built using a language similar to JavaScript - TypeScript.
TypeScript is not a brand new language, but a superset of ES6. All ES6 code is fully valid and compilable TypeScript code.

What you must know about TypeScript


##typescript

TypeScript has five major improvements over ES5:

Type

Class

Annotation

Module import

Language toolkit

Type

TypeScript types are optional.

However, the benefits of type checking are:
1 It helps to write code and prevent bugs during compilation
2 It helps to read the code and clearly express the author's intention

characters String

String contains text, declared as string type:

var name: string = 'hello world!';
Copy after login

Number

Whether integer or floating point, in TypeScript, all data is represented by floating point number:

var age: number = 25;
Copy after login

Array

The array is represented by the Array type. Because the array is a set of the same

data type, you also need to specify a type## for the items in the array. #

Enumeration

An enumeration is a set of nameable values,

enum Man {age, iq, eq};
var man: Man = Man.age;
Copy after login

Any type

If no type is specified for a variable, its default The type is any. Variables of any type can receive any type of data

var something: any = 'hello world';
something = 1;
something = [1, 2, 3];
Copy after login

"None" type

void means that there is no type expected there, and is usually used as the return value of a

function

, indicating that there is no return value

void type is also a legal any type

Class

es5 uses prototype-based

Object-oriented

Design does not use classes, but relies on prototypes In es6, you can use class to represent built-in classes, such as:

class Point {}
Copy after login

Classes can contain attributes, methods and

constructors

Attributes

Attributes define the data of class instance objects, such as: Point class can have x, y attributes

Each attribute in the class can contain an optional The selected type, such as:

class Point {    x: number;    y: number;
}
Copy after login

Method

Method is a function executed in the context of a class object instance. Before calling the method of the object, there must be an instance of this object

class Point {
    x: number;
    y: number;
    moveTo(x: number, y: number) {        this.x = x;        this.y = y;        console.log(this.x, this.y);
    }
}var p: Point = new Point();
p.x = 1;
p.y = 1;
p.moveTo(10,10);
Copy after login

Constructor

The constructor is a special function that is executed when a class is instantiated. New objects are usually initialized in the constructor.

The constructor must be named constructor, because the constructor is in the class It is called when it is instantiated, so it can have input parameters, but cannot have a return value

When the class does not explicitly define a constructor, a parameterless constructor will be automatically created

class Point {
}var p = new Point();
等价于class Point {    constructor() {
    }
}var p = new Point();
Copy after login

Constructor with parameters

class Point {
    x: number;
    y: number;    constructor(x: number, y: number) {        this.x = x;        this.y = y;
    }
    moveTo(x: number, y: number) {        this.x = x;        this.y = y;        console.log(this.x, this.y);
    }
}    
var p: Point = new Point(1,1);
p.moveTo(10,10);
Copy after login

Inheritance

Another important feature of object-oriented is inheritance. Inheritance shows that a subclass can get its behavior from the parent class, and then it can rewrite, modify or add behavior in this subclass.

TypeScript has completed supporting the inheritance feature, using the extends keyword to implement


Creating a parent class

class Parent {
    name: string;    constructor(name: string){        this.name = name;
    }
    say() {        console.log('NAME:' + this.name);
    }
}
Copy after login

Subclass

class Child {
    age: number;    constructor(name: string, age: number) {        super(name);        this.age = age;
    }
    say() {        super.say();        console.log(' AGE:' + this.age);
    }
}var n: Child = new Child('vist', 25);
n.say();
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to make cyan fireworks with black background in canvas


Using Fetch to make http requests

The above is the detailed content of What you must know about TypeScript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template