TypeScript學習筆記（六）：泛型

認識泛型

TypeScript也實現了類型於C#和Java的泛型以實現類型的參數化，我們先看一個需求：

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

我們希望方法identity可以傳入任意類型，並且返回傳入的類型，這樣寫可以達到效果但是不能確定返回的類型，使用泛型的寫法如下：

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

var output = identity<string>("myString");  // type of output will be 'string'
var output = identity("myString");  // type of output will be 'string'

我們可以指定類型，也可以讓編譯器自動來識別類型。

泛型數組

我們也可以通過泛型來指定一個數組，寫法如下：

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

function loggingIdentity<T>(arg: Array<T>): Array<T> {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

泛型類型

我們可以指定一個帶有泛型的函數：

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

var myIdentity: <U>(arg: U)=>U = identity;

還有另一種寫法：

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

var myIdentity: {<T>(arg: T): T} = identity;

使用函數接口的寫法如下：

interface GenericIdentityFn {
    <T>(arg: T): T;
}

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

var myIdentity: GenericIdentityFn = identity;

同時泛型還可以作為類型的參數而不是方法的參數，寫法如下：

interface GenericIdentityFn<T> {
    (arg: T): T;
}

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

var myIdentity: GenericIdentityFn<number> = identity;

泛型類

泛型除了可以用在接口上以外，當然還可以用在類上：

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

var myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

var stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };
alert(stringNumeric.add(stringNumeric.zeroValue, "test"));

使用方法和C#與Java一致。

泛型約束

之前的泛型可以是任意的類型，我們還可以約束泛型的類型，我們先看一個會報錯的例子：

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}

報錯原因是，類型T沒有length屬性，我們可以為類型T指定一個類型，如下：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}

寫法是通過extends來指定類型T的類型必須是實現了Lengthwise接口的類型。

調用如下：

loggingIdentity(3);  // Error, number doesn't have a .length property
loggingIdentity({length: 10, value: 3});  

泛型約束泛型

某些情況下，我們可能會有如下的需求：

function find<T, U extends Findable<T>>(n: T, s: U) {   // errors because type parameter used in constraint
  // ...
} 
find (giraffe, myAnimals);

這種寫法會報錯，可以使用下面正確的寫法來達到效果：

function find<T>(n: T, s: Findable<T>) {   
  // ...
} 
find(giraffe, myAnimals);

在泛型中使用類類型

有時我們希望可以指定泛型的構造函數和屬性，寫法如下：

function create<T>(c: {new(): T; }): T { 
    return new c();
}

再看另外一個例子：

class BeeKeeper {
    hasMask: boolean;
}

class ZooKeeper {
    nametag: string; 
}

class Animal {
    numLegs: number;
}

class Bee extends Animal {
    keeper: BeeKeeper;
}

class Lion extends Animal {
    keeper: ZooKeeper;
}

function findKeeper<A extends Animal, K> (a: {new(): A; 
    prototype: {keeper: K}}): K {

    return a.prototype.keeper;
}

findKeeper(Lion).nametag;  // typechecks!