码迷,mamicode.com
首页 > 其他好文 > 详细

TS学习之泛型

时间:2017-10-31 11:04:43      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:err   ring   nbsp   span   class   string   ret   上下文   种类型   

可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据

不适用泛型的函数

function myfn(args: number): number {
    return args;
}

function myfn(args: any): any {
    return args;
}

第一个只能传入number类型的参数,第二个虽然可以传入任意类型的参数,但是却丢失了部分信息:返回的类型应该和传入的类型相同

使用泛型函数(T:类型变量)

function myfn<T>(args: T): T {
    return args;
}

调用方法:

let output = myfn<string>("Hello"); //明确传入类型参数
let output2 = myfn("Hello")  //不传入类型参数,TS根据上下文自动推断类型

使用泛型变量(这可以让我们把泛型变量T当做类型的一部分使用,而不是整个类型)

function myfn<T>(args: T[]): T[] {
    console.log(args.length)
    return args;
}

function myfn2<T>(args: Array<T>): Array<T> {
    console.log(args.length);
    return args;
}

 创建泛型接口

interface Test {
    <T>(args: T): T
}

function myfn<T>(args: T): T {
    return args;
}

let myTest: Test = myfn;

泛型类(这里没有限定T的类型,可以传入任意类型)

class add<T>{
    value: T;
    add: (x: T, y: T) => T;
}
let myTest = new add<number>();
myTest.value = 0;
myTest.add = function (x, y) {
    return x + y
}

泛型约束(类型变量继承接口)

interface Test{
    length:number;
}
function myfn<T extends Test>(args:T):T{
    console.log(args.length)
    return args;
}
myfn(3); //error
myfn("abc") //3

上例中,传入的参数必须具有length属性

TS学习之泛型

标签:err   ring   nbsp   span   class   string   ret   上下文   种类型   

原文地址:http://www.cnblogs.com/sghy/p/7760202.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!