TypeScript 泛型
TS里面有泛型让我很意外,这个比AS3确实要强大:
|
1
2
3
|
let myIdentity_change : <T>(arg:T)=>T=function(a){ return a };
console.log(`generic : ${myIdentity_change<string>("Hello World!!!")}`);
|
结果:
看看泛型接口
①:注意接口(GenericFun)后面没有<T>
|
1
2
3
4
5
6
7
8
9
|
interface GenericFun{ <T>(arg : T):T;
}function indentity<T>(arg:T):T{
return arg;
}let myIdentity : GenericFun = indentity;console.log(`generic : ${myIdentity<string>("Hello World!!!")}`);
|
②:这里有一个缺陷
|
1
2
3
4
5
6
7
8
9
|
interface GenericFun_change<T>{ <T>(arg : T):T;
}function indentity_01<T>(arg:T):T{
return arg;
}let myIndentity_01 : GenericFun_change<string> = indentity_01;console.log(`generic : ${myIndentity_01<number>(123)}`); |
结果:
但是,看代码参数123下面有红色波浪报错提示.虽然这样写能够得到正确的结果.但是myIndentity_01定义的泛型类型string和调用的类型number根本就不一致,在TS中不能这么干,但是生成的Js确实运行后能得到正确的结果.
以下是生成的JS的(没有类型的限制) :
|
1
2
3
4
5
|
function indentity_01(arg) {
return arg;
}var myIndentity_01 = indentity_01;
console.log("generic : " + myIndentity_01(123));
|
泛型类:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
class GenericHandler<T>{ zeroValue : T;
add : ( x : T , y : T ) => T;
}let myGenericHandler : GenericHandler<number> = new GenericHandler<number>();
myGenericHandler.zeroValue = 0;myGenericHandler.add = ( x : number , y : number ) => { return x + y; };
myGenericHandler.zeroValue = 2;console.log( `2+5 = ${ myGenericHandler.add(2,5) } ` );console.log(`zeroValue Value : ${ myGenericHandler.zeroValue }`); |
结果:
泛型约束
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
interface Lengthwise{ length : number;
}class GenericHandler<T extends Lengthwise>{ zeroValue : T;
add : ( x : T , y : T ) => number;
}let myGenericHandler : GenericHandler<number[]> = new GenericHandler<number[]>();
myGenericHandler.zeroValue = null;
myGenericHandler.add = ( x : number[] , y : number[] ) => { return x.length + y.length;
};let arr : number[] = [1,2,3];myGenericHandler.zeroValue = arr;let arr_2 : number[] = [2,3];console.log( `[1,2,3] + [2,3] all length = ${ myGenericHandler.add(arr,arr_2) }` );console.log(`zeroValue Value : ${ myGenericHandler.zeroValue }`); |
如果T要用length属性的话 , 可以用以上方式 ( extends interface )
结果:
补充泛型方法约束写法:
|
1
2
3
4
5
6
7
8
9
|
//方法的泛型约束1function add_change_01< T extends Lengthwise>( x : T , y : T ):number{
return x.length + y.length;
}//方法的泛型约束2let add_change_02 = <T extends Lengthwise>( x : T , y : T ) =>{ return x.length + y.length; };
console.log( `add_change_01 ${ add_change_01<number[]>( arr , arr_2) }` );console.log( `add_change_02 ${ add_change_02<number[]>( arr , arr_2) }` ); |
结果:
在泛型里使用类类型(2中方法的实际效果是一样的):
|
1
2
3
4
5
|
function create<T>( c : { new() : T } ):T{
return new c();
}let create_change_01 = <T>( c : { new() : T } ) => { return new c(); };
|
在泛型方法类类型中加入泛型约束(一下4个方法的效果是一样的):
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
interface LegthWish{ length : number;
}function create_constraint< T extends LegthWish >( c : { new() : T }):T{
return new c();
}function create_constraint_01<T extends LegthWish>( c : new() => T ):T{
return new c();
}let create_constraint_change_02 : Function = < T extends LegthWish >( c : { new() : T } )=>{ return new c(); };
let create_constraint_change_03 : Function = < T extends LegthWish >( c : new()=>T)=>{ return new c(); };
|
扩展一下:::
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
interface LegthWish{ length : number;
}function create_constraint< T extends LegthWish >( c : { new() : T }):T{
return new c();
}function create_constraint_01<T extends LegthWish>( c : new() => T ):T{
return new c();
}let create_constraint_change_02 : Function = < T extends LegthWish >( c : { new() : T } )=>{ return new c(); };
let create_constraint_change_03 : Function = < T extends LegthWish >( c : new()=>T)=>{ return new c(); };
class Ai implements LegthWish{ public length : number;
constructor(){
this.length = 1;
}
}class Bi implements LegthWish{ public length : number;
constructor(){
this.length = 2;
}
}enum Factory_Type{ AI = 0,
BI = 1
}let create_factory:( type : Factory_Type )=>LegthWish=function( a ){
let legthClass : LegthWish = null;
switch( a ){
case Factory_Type.AI:
//legthClass = new Ai();//还可以用以下的方法来写
legthClass = create_constraint_01<LegthWish>(Ai);
break;
case Factory_Type.BI:
//legthClass = new Bi();
legthClass = create_constraint_01<LegthWish>(Bi);
break;
}
return legthClass;
};let _ai : LegthWish = create_factory( Factory_Type.AI );console.log(`this is AI.length : ${_ai.length}`);
let _bi : LegthWish = create_factory( Factory_Type.BI );console.log(`this is BI.length : ${_bi.length}`);
|
结果:
本文转自Aonaufly51CTO博客，原文链接： http://blog.51cto.com/aonaufly/1955477，如需转载请自行联系原作者