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.

##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!';

Number

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

var age: number = 25;

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. #

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

Enumeration

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

function

, indicating that there is no return value

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

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 {}

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

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

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

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

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

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:

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!