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
|
//方法的泛型约束1
function
add_change_01< T extends Lengthwise>( x : T , y : T ):number{
return
x.length + y.length;
}
//方法的泛型约束2
let 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，如需转载请自行联系原作者
