摘要：編譯器會(huì)根據(jù)這個(gè)列表去處理函數(shù)的調(diào)用。泛型泛型接口使用尖括號(hào)傳入泛型變量，它會(huì)根據(jù)參會(huì)類型智能賦值。泛型類在這里，泛型作為一種變量，可供用戶調(diào)用的時(shí)候動(dòng)態(tài)約束類屬性。在泛型約束中使用類型參數(shù)

使用ts完成一個(gè)todomvc的demo

 interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

接口可以用來校驗(yàn)參數(shù)的類型，參數(shù)是否存在等等。

interface SquareConfig {
    color?: string;
    width?: number;
  }
  
function createSquare(config: SquareConfig): { color: string; area: number } {
    let newSquare = {color: "white", area: 100};
    if (config.clor) {
      // Error: Property "clor" does not exist on type "SquareConfig"
      newSquare.color = config.clor;
    }
    if (config.width) {
      newSquare.area = config.width * config.width;
    }
    return newSquare;
}
  
let mySquare = createSquare({color: "black"}); 

interface Point {
    readonly x: number;
    readonly y: number;
} 

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

對(duì)象字面量形式會(huì)被特殊對(duì)待而且會(huì)經(jīng)過額外屬性檢查

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    let newSquare = { color: "white", area: 100 };
    if (config.clor) {
        // Error: Property "clor" does not exist on type "SquareConfig"
        newSquare.color = config.clor;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({ color: "black" });

createSquare({ colour: "red", width: 100 }); 
// Error: Property "colour does no exist on type "SquareConfig"

如果想解決這個(gè)問題有三種解決辦法

// 1. 將對(duì)象字面量復(fù)制給變量，傳入變量不會(huì)被進(jìn)行額外屬性檢查
let skipLiteral = { colour: "red", width: 100 };
createSquare(skipLiteral);

// 2.采用類型斷言，使用as操作符，告訴編譯器我傳入的參數(shù)對(duì)象就是你要的類型
createSquare({ colour: "red", width: 100 } as SquareConfig);

// 3.第三種方式，添加萬能校驗(yàn)符，這個(gè)符號(hào)會(huì)包容color、width之外所有其他屬性，慎用
interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
} 

interface SearchFunc {
  (source: string, subString: string): boolean;
} 

interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0]; 

ts支持兩種索引簽名，字符串和數(shù)值，同時(shí)使用的時(shí)候，數(shù)值索引返回的類型必須是字符串索引返回類型的子類，因?yàn)閖s解析的時(shí)候會(huì)將數(shù)值索引轉(zhuǎn)換為字符串索引，所以數(shù)值索引返回的類型必須與字符串返回的類型保持一致（或子類）。

class Animal {
    name: string;
}
class Dog extends Animal {
    breed: string;
}

// 錯(cuò)誤：使用數(shù)值型的字符串索引，有時(shí)會(huì)得到完全不同的Animal!
interface NotOkay {
    [x: number]: Animal;
    [x: string]: Dog;
} 

與C#或Java里接口的基本作用一樣，TypeScript也能夠用它來明確的強(qiáng)制一個(gè)類去符合某種契約。

interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
} 

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
} 

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log("Woof! Woof!");
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark(); 

let passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    alert(employee.fullName);
} 

class Grid {
    static origin = {x: 0, y: 0};
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
    constructor (public scale: number) { }
}

let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scale

console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10})); 

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

interface Point3d extends Point {
    z: number;
}

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

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; }; 

方法是為同一個(gè)函數(shù)提供多個(gè)函數(shù)類型定義來進(jìn)行函數(shù)重載。 編譯器會(huì)根據(jù)這個(gè)列表去處理函數(shù)的調(diào)用。

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    // Check to see if we"re working with an object/array
    // if so, they gave us the deck and we"ll pick the card
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // Otherwise just let them pick the card
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}

let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);

let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit); 

function identity(arg: T): T {
    return arg;
} 

使用尖括號(hào)傳入泛型變量，它會(huì)根據(jù)參會(huì)類型智能賦值。比如arg是number，那么T就會(huì)被賦值為number。

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

let myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; }; 

在這里，泛型作為一種變量，可供用戶調(diào)用的時(shí)候動(dòng)態(tài)約束類屬性。

function getProperty(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // okay
getProperty(x, "m"); // error: Argument of type "m" isn"t assignable to "a" | "b" | "c" | "d".