TS學習之泛型

可以使用泛型來創建可重用的組件，一個組件可以支持多種類型的數據

不適用泛型的函數

function myfn(args: number): number {
    return args;
}

function myfn(args: any): any {
    return args;
}

第一個只能傳入number類型的參數，第二個雖然可以傳入任意類型的參數，但是卻丟失了部分信息：返回的類型應該和傳入的類型相同

使用泛型函數（T：類型變量）

function myfn<T>(args: T): T {
    return args;
}

調用方法：

let output = myfn<string>("Hello"); //明確傳入類型參數
let output2 = myfn("Hello")  //不傳入類型參數，TS根據上下文自動推斷類型

使用泛型變量（這可以讓我們把泛型變量T當做類型的一部分使用，而不是整個類型）

function myfn<T>(args: T[]): T[] {
    console.log(args.length)
    return args;
}

function myfn2<T>(args: Array<T>): Array<T> {
    console.log(args.length);
    return args;
}

 創建泛型接口

interface Test {
    <T>(args: T): T
}

function myfn<T>(args: T): T {
    return args;
}

let myTest: Test = myfn;

泛型類（這里沒有限定T的類型，可以傳入任意類型）

class add<T>{
    value: T;
    add: (x: T, y: T) => T;
}
let myTest = new add<number>();
myTest.value = 0;
myTest.add = function (x, y) {
    return x + y
}

泛型約束（類型變量繼承接口）

interface Test{
    length:number;
}
function myfn<T extends Test>(args:T):T{
    console.log(args.length)
    return args;
}
myfn(3); //error
myfn("abc") //3

上例中，傳入的參數必須具有length屬性