What you must know about TypeScript

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.

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

var name: string = 'hello world!';

var age: number = 25;

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

var arr: Array<string> = [&#39;component&#39;, &#39;provider&#39;, &#39;pipe&#39;];
    或var arr: string[] = [&#39;component&#39;, &#39;provider&#39;, &#39;pipe&#39;];var arr: Array<number> = [1, 2, 3, 4, 5, 6];
    或var arr: number[] = [1, 2, 3, 4, 5, 6];

An enumeration is a set of nameable values,

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

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];

"None" type

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

, indicating that there is no return value

function setName(name: string): void {    this.name = name;
}

Class

es5 uses prototype-based

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

class Point {}

Attributes

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

class Point {    x: number;    y: number;
}

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);

Constructor

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

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();

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);

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.

Creating a parent class

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

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();

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:

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!