Environment configuration

Packages to install:

  • typescript
  • Ts-node (can run ts files directly)
npm i typescript ts-node -g
Copy the code

Matters needing attention:

  • This may be reported when running ts files with TS-NodeCannot find module ‘@types/node/package.json’If there is a global installationtslib.@types/nodeThese two bags will do.
  • If you run the ts file directly from the run button in the upper right corner of vscode, the dependencies described above must be installed globally

Daily type

The base type

string, number, boolean, null,undefined

An array type

  • Type + square brackets notation

    let fibonacci: number[] = [1.1.2.3.5];
Copy the code

  • A generic way

    let arr:Array<number> = []
let arr = new Array<string> ()Copy the code

  • The interface way

    interface NumberArray {
    [index: number] :number;
}
let fibonacci: NumberArray = [1.1.2.3.5];
Copy the code

  • Declared class array

    interface ArgsArray {
    [index: number] :number;
    length: number;
    callee: Function;
}
function sum() {
    let args: ArgsArray = arguments;
}
Copy the code

any/unkown

Any – Any type

Unkown – Unknown type

let a:any
a = 1 // OK 
a = 'string' // OK 

let b:unkown
b = 1 // OK 
b = 'string' // OK 

let c:number = b // Error
Copy the code

The two types are used in much the same way, except that variables declared with Unkown cannot be assigned to other variables

noImplicitAny

In ts.config, if this parameter is set to true, the any type needs to be added explicitly; otherwise, if this parameter is set to false, the any type is added implicitly

// noImplicitAny=true
function a(x){} // Error
function a(x:any){} // Ok

// noImplicitAny=false
function a(x){} // OK
Copy the code

Type Assertion

Type Assertion can be used to manually specify the Type of a value. You can use assertions whenever you determine a value

grammar

// Value as type
num as number

//< type > value
<number>num
Copy the code

use

/ / in case 1
interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function swim(animal: Cat | Fish) {
    (<Fish>animal).swim()
}

/ / case 2
class ApiError extends Error {
    code: string = '00';
}
class HttpError extends Error {
    statusCode: number = 200;
}

function isApiError(error: Error) {
    if (typeof (error as ApiError).code === 'string') {
        return true;
    }
    return false;
}
Copy the code

Not empty assertion

When the type of a variable cannot be determined in the context, the expression suffix is added! Can be used for assertion, the variable must not be null or undefined

// The following code will report an error without using a non-empty assertion
function sum(x: number | null | undefined, y: number | null | undefined) {
    return x + y
}

/ / after use
function sum(x: number | null | undefined, y: number | null | undefined) {
    return x! + y!
}

// Can also be combined with as
function sum(x: number | string | null | undefined, y: number | null | undefined) {
    return (x as number)! + y!
}
Copy the code

Interface (interface)

grammar

interfaceInterface name {attribute: Attribute type}Copy the code

use

/ / declare
interface Person {
    name: string;
    age: number;
    getName() : string // Define the function
}
/ / use
let ivan :Person = {
    name:'ivan'.age:18.getName(){
        return this.name
    }
}
Copy the code

Any attribute

Any property in the sample code is of type String, and its value can be of type string or number. You can’t define a type other than string or numbe in the Person interface or you’ll get an error.

Ivan. Address = ‘Guangdong Zhuhai’ this code will fail if there is no arbitrary attribute

Grammar:

interfacePerson {[arbitrary name: attribute type]: type of attribute value}Copy the code

Example:

interface Person {
    name: string;
    isBoy:boolean; // Error
    [propName: string] :string | number // Any attribute
}

let ivan :Person = {
    name:'ivan'.age:18.// OK
    isChild:true.// Error
}
ivan.address = 'Zhuhai, Guangdong' // OK
Copy the code

Note: Once any attribute is defined, the type of both the determined attribute and the optional attribute must be a subset of its type.

Read-only property

Read only this property allows only read behavior, not assignment

Grammar:

interface Person { 
	readonlyProperty: type}Copy the code

Example:

interface Person {
    readonly id: number;
}

let ivan :Person = {
    id:1.// OK
}

ivan.id = 1 // Error
Copy the code

Note: Constraint object assignment, not constraint to attribute assignment

Interface Inheritance interface

Grammar:

interfaceInterface 1 Extendx interface 2 {... }Copy the code

Example:

interface Alarm {
    alert(): void;
}
interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}
class door implements LightableAlarm{
    lightOn(): void {
        throw new Error("Method not implemented.")
    }
    lightOff(): void {
        throw new Error("Method not implemented.")
    }
    alert(): void {
        throw new Error("Method not implemented.")}}Copy the code

Interface inheritance class

When we declare Interface Point3d extends Point, Point3d actually inherits the type of an instance of the class Point.

In other words, one interface, Point3d, is defined to inherit from another interface, PointInstanceType.

So there is no essential difference between “interface inheriting class” and “interface inheriting interface”.

Grammar:

interfaceInterface 1 Extendx class 1 {... }Copy the code

Example:

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y; }}interface PointInstanceType {
    x: number;
    y: number;
}

// Equivalent to Interface Point3d extends PointInstanceType
interface Point3d extends Point {
    z: number;
}


let point3d: Point3d = {x: 1.y: 2.z: 3};

function printPoint(p: PointInstanceType) {
    console.log(p.x, p.y);
}
printPoint(new Point(1.2));
Copy the code

Note: Interfaces inherit only class properties and methods, not classesconstructor

Generics (up)

Generics is the property of defining functions, interfaces, or classes without specifying a specific type in advance, but specifying the type at the time of use.

The easy way


is added to the function name, where T is used to refer to any type of input, which can be used in the input value: T and output Array

. The type of the generic can be passed in when a function is called, or the type of the argument if it is not written

function createArrayG<T> (value:T) :Array<T>{
    let arr = []
    arr = Array(5).fill(value)
    return arr
}
console.log(createArrayG<number> (1)) // Output: [1,1,1,1]
Copy the code

Inheritance in generics

When T inherits a number, the function must be called with the type number

function createArrayG2<T extends number> (value:T) :Array<T>{
    let arr = []
    arr = Array(5).fill(value)
    return arr
}
console.log(createArrayG2(1)) // OK
console.log(createArrayG2('1')) // Error 
Copy the code

Multiple type parameters

Multiple different type parameters can be defined in generics

function swap<T.U> (a: T, b: U) :U.T] {
    //return [a, b]; // Error
    return [b, a];
}

console.log(swap<number.string> (7.'seven')); // OK
console.log(swap<number.string> ('seven'.7)); // Error
console.log(swap<number.string> ('seven'.true)); // Error
Copy the code

Generic constraint

When using a generic variable, there is no way to know what properties and methods the variable has. If you want to check the length of the variable by length, ts will report an error.

To do so, you define an interface and then declare a Length attribute, and then inherit the interface via generics.

Example:

interface ILength {
    length: number;
}
// good
function loggingIdentity<T extends ILength> (arg: T) {
    console.log(arg.length);
}
// bad
function loggingIdentity<T> (arg: T) {
    console.log(arg.length);
}

loggingIdentity(1) // Error
loggingIdentity('hello'); // OK
Copy the code

Note: When calling loggingIdentity, the ARG must have the length attribute or an error will be reported

A generic interface

Example:

/* Mode 1 */
interface CreateArrayFunc {
    <T>(length: number.value: T): Array<T>;
}
let createArrayIn: CreateArrayFunc;
createArrayIn = function <T> (length: number, value: T) :Array<T> {
    let result: T[] = [];
    result = Array(length).fill(value);
    return result;
};
console.log(createArrayIn<number> (3.1));
Copy the code
/* Mode 2 */
interface CreateArrayFunc2<T> {
    (length: number.value: T): Array<T>;
}
let createArrayIn2: CreateArrayFunc2<any>;
createArrayIn2 = function <T> (length: number, value: T) :Array<T> {
    let result: T[] = [];
    result = Array(length).fill(value);
    return result;
};
console.log(createArrayIn2(3.1));

// The interface definition of the object
interface CreateObj<T> {
    name: T
}

let createObjI:CreateObj<string>
Copy the code

Note: When using a generic interface, you need to define the type of the generic when the generic parameter is specified in the interface name

A generic class

Example:

class GenericNumber<T> {
    zeroValue: T | undefined; add! :(x: T, y: T) = > T;
}

let myGenericNumber = new GenericNumber<number> (); myGenericNumber.zeroValue =0;
myGenericNumber.add = function (x, y) {
    return x + y;
};
console.log(myGenericNumber.add(1.2));
Copy the code

Note: if the property is usedT, this attribute needs to be added by oneundefinedType, or use! Not empty assertion!

The default type of a generic parameter

Example:

function createArrayInf<T = string> (length: number, value: T) :Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
console.log(createArrayInf(5.1));
Copy the code

Class (class)

narrowing