Typescript 查缺补漏

Types

Casting:

代码语言：javascript复制

let input = xxx as HTMLInputElement;
let input = <HTMLElement>xxxx;

Object Shapes:

Typescript only cares about the shape of an object.

Interfaces:

only describe structure, no implementation
don't compile to any js code
DRY, easy refactoring
open, can be extended later on. (extends)

any:

never:

Nothing can be assigned to never.

function return type void.

Classes

still protofypal inheritance, but better syntax.

static method:

代码语言：javascript复制

static createPerson() {
}

instance / public fields:

代码语言：javascript复制

class Person {
    static population = 122; // public (static) field
    country = 'China'; // instance field

    constructor(name) {
    }
}

inheritance:

代码语言：javascript复制

class Person : Human {
    constructor() {
        super();
    }
}

super.xxx(); // function invoke.

Species:

代码语言：javascript复制

    static get [Symbol.species]() {
        return Array;
    }

Mixins:

Enums:

代码语言：javascript复制

enum Gender {
    Male,
    Female
}

Arrays:

Tuples:

Fixed length.

代码语言：javascript复制

let t2: [string, number];
t2 = ['angular', 1];

Type Aliases:

interface sometimes is not good enough.

type keyword to define a type alias:

代码语言：javascript复制

type Color = [number, number, number];
let red: Color = [255, 0, 0];

can be exported.

Object Literals

Enhanced:

代码语言：javascript复制

let person = {
    __proto__ : String.prototype,
    name: 'Dave',
    company,
    [`${company}Title`]: 'CTO',
    toString() {
        return `${super.toString()}xxx`;
    }
};

Destructured Assignment:

Rest, Spread Properties:

...

rest: and the rest goes here

spread: and all the properties on this object.

Getters, Setters:

Function - Types:

Functions have a type just like any other value.

interface can also describe functions:

代码语言：javascript复制

interface ClickListener {
    (this: Window, e: MouseEvent): void
}

const myListender: ClickListener = (e) => {
    console.log(e);
};

this, calling context must be window.

Function - Parameters:

named, optional, default value, rest parameters(...).

Generics

代码语言：javascript复制

let persons = Array<[String, String]>(20);

can specify constraints on generic types:

代码语言：javascript复制

function calc<T extends number>(x: T, y: T) {

}

can also be use with interface:

代码语言：javascript复制

interface IFileReader<T extends File> {
    read(file: T): Blod
}

Access Modifier Keywords:

public, protected, private

Function overloading:

Allows us to have more than one function "head", but a single implementation.

代码语言：javascript复制

function add(x: number, y: number): number; // this pattern ok
function add(x: string, y: string, radix: number): number; // this pattern ok

function add(x: number | string, y: number | string, radix: number = 10): number { // must match 2 patterns above.
    return parseInt(`${x}`, radix)   parseInt(`${y}`, radix);
}

代码语言：javascript复制