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!!!" )}`);

结果:

wKioL1mNRN_Q_XdJAAAhj3cJMHk869.png-wh_50

 

看看泛型接口

①:注意接口(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)}`);

结果:

wKiom1mNR4CDNKSRAAAgeoqVD0g334.png-wh_50

但是,看代码参数123下面有红色波浪报错提示.虽然这样写能够得到正确的结果.但是myIndentity_01定义的泛型类型string和调用的类型number根本就不一致,在TS中不能这么干,但是生成的Js确实运行后能得到正确的结果.

wKioL1mNSLTyYSiUAABRY6zU6xw860.png-wh_50

以下是生成的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 }`);

结果:

wKiom1mNTYmyTT90AAAntnv88IY209.png-wh_50

 

泛型约束

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 )

结果:

wKioL1mNUqaCZEB-AAAk5G78jAQ603.png-wh_50

 

补充泛型方法约束写法:

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) }` );

结果:

wKioL1mNVYeAZe7aAAAlyiEfjQw241.png-wh_50

 

 

 

 

在泛型里使用类类型(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}`);

结果:

wKiom1mNnYWwdrsAAAAgnidoXRI747.png-wh_50

















本文转自Aonaufly51CTO博客,原文链接: http://blog.51cto.com/aonaufly/1955477,如需转载请自行联系原作者

相关文章
|
5月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
120 0
|
5月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
1月前
|
JavaScript 编译器
typescript之泛型
typescript之泛型
124 60
|
19天前
|
JavaScript 安全
typeScript进阶(14)_泛型和注意事项
TypeScript中的泛型允许创建可重用的代码。泛型可以定义函数、接口、类,支持传递类型参数,实现类型安全。泛型可以用于数组,约束类型参数必须符合特定的接口,也可以在接口和类中使用。泛型类可以包含多个类型参数,甚至在泛型约束中使用类型参数。
13 0
typeScript进阶(14)_泛型和注意事项
|
2月前
|
JavaScript 安全 算法
TypeScript:一个好泛型的价值
TypeScript:一个好泛型的价值
|
3月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
67 0
|
3月前
|
JavaScript 安全
TypeScript(十一)泛型工具类型
TypeScript(十一)泛型工具类型
34 0
|
3月前
|
JavaScript 前端开发 索引
TypeScript(十)泛型进阶
TypeScript(十)泛型进阶
24 0
|
3月前
|
JavaScript 开发者
TypeScript(九)泛型基础
TypeScript(九)泛型基础
20 0
|
4月前
|
JavaScript
TypeScript 泛型类型
TypeScript 泛型类型