TypeScript 泛型<T>使用整理

旧城等待， 2022-06-13 05:22 410阅读 0赞

**一、介绍**

相C\#和Java等以上，TypeScript可以使用泛型来创建可重用的组件。支持当前数据类型，同时也能支持未来的数据类型。扩展灵活。

**二、泛型的定义、使用**

使用泛型可以创建泛型函数、泛型接口，泛型类

1.使用泛型变量

//泛型变量的使用
    function identity<T>(arg:T):T{
        console.log(typeof arg);
        return arg;
    }
    let output1=identity<string>('myString');
    let output2=identity('myString');
    let output3:number=identity<number>(100);
    let output4:number=identity(200);

//使用集合的泛型
    function loggingIdentity<T>(arg:Array<T>):Array<T>{
        console.log(arg.length);
        return arg;
    }
    loggingIdentity([1,2,3]);

2.定义泛型函数

//泛型函数
    function identity<T>(arg:T):T{
        return arg;
    }
    let myIdentity:{<T>(arg:T):T}=identity;

3.定义泛型接口

//泛型接口
    interface GenericIdentityFn<T> {
        (arg: T): T;
    }
    function identity<T>(arg: T): T {
        return arg;
    }
    let myIdentity: GenericIdentityFn<number> = identity;

4.定义泛型类

//泛型类
    class GenericNumber<T>{
        zeroValue:T;
        add:(x:T,y:T)=>T;
    }
    let myGenericNumber=new GenericNumber<number>();
    myGenericNumber.zeroValue=0;
    myGenericNumber.add=function(x,y){return x+y;};
    console.info(myGenericNumber.add(2,5));
    let stringNumberic=new GenericNumber<string>();
    stringNumberic.zeroValue='abc';
    stringNumberic.add=function(x,y){return `${x}--${y}`};
    console.info(stringNumberic.add('张三丰','王小明'));

**三、泛型约束**

1.使用 extends指定泛型类型的继承关系

//泛型约束 extends执行类型的继承关系
    interface Lengthwise {
    length: number;
    }
    function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
    }
    loggingIdentity({ length: 2, value: 3 });

2.指定泛型类型为类类型的约束

//在泛型中使用类类型约束
    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 createInstance<A extends Animal>(c: new () => A): A {
        return new c();
    }
    createInstance(Lion).keeper.nametag;  // typechecks!
    createInstance(Bee).keeper.hasMask;   // typechecks!

[TypeScript 函数使用整理][TypeScript]

[TypeScript 类使用整理][TypeScript 1]

[TypeScript 接口介绍][TypeScript 2]

[TypeScript]: http://blog.csdn.net/u011127019/article/details/73840827
[TypeScript 1]: http://blog.csdn.net/u011127019/article/details/73775647
[TypeScript 2]: http://blog.csdn.net/u011127019/article/details/73651009