ts泛型学习笔记

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

function identity<T>(arg: T): T {
    return arg;
}

T帮助我们捕获用户传入的类型。

泛型使用方式一:

传入所有的参数,包含类型参数。

let output = identity<string>("myString");

泛型使用方式二:

使用类型推论,即编译器会根据传入的参数自动地帮助我们确定T的类型。

let output = identity("myString");

  • 泛型变量

使用泛型创建泛型函数时,编译器要求在函数体须正确的使用这个通用的类型,必须把这些参数当做是任意或所有类型。

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

如果只是(arg:T)则会报错,因为可能传入number类型的数组,而此时的T是number不是Array,而(arg:Array<T>)可以让我们把泛型变量T当做类型的一部分使用,而不是整个类型。

  • 泛型函数

要有一个类型参数在最前面,像函数声明一样。

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <T>(arg: T) => T = identity;
  • 泛型接口

如果想要知道使用的具体是哪个泛型类型,就需要在泛型接口名后加上类型。

interface GenericIdentityFn<T> {
    (arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;
  • 泛型类

泛型类与泛型接口差不多,泛型类使用( <>)括起泛型类型,跟在类名后面。直接把泛型类型放在类后面,可以帮助我们确认类的所有属性都在使用相同的类型。

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; };
  • 泛型约束

在一个函数中如果需要用到.length属性,那么就必须给T提出约束,至少要包含这一属性。为此,我们定义一个接口来描述约束条件。 创建一个包含 .length属性的接口,使用这个接口和extends关键字来实现约束。

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值