您的位置:首页 > 其它

TypeScript 泛型<T>使用整理

2017-06-28 15:54 661 查看
一、介绍

相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 接口介绍
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: