理解TypeScript的泛型

前端精髓

共 2174字,需浏览 5分钟

 ·

2021-03-29 12:43


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

泛型函数

// arg 参数类型是一个泛型变量 T,也可以使用不同的泛型参数名function identity<T>(arg: T): T {    return arg;}


们定义了泛型函数后,可以用两种方法使用。第一种是,传入所有的参数,包含类型参数:

let output = identity<string>("myString");  // type of output will be 'string'


这里我们明确的指定了 Tstring 类型,并做为一个参数传给函数,使用了<> 括起来而不是()。


第二种方法更普遍。利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定T的类型:

let output = identity("myString");  // type of output will be 'string'


注意我们没必要使用尖括号(<>)来明确地传入类型;编译器可以查看 myString 的值,然后把 T 设置为它的类型。类型推论帮助我们保持代码精简和高可读性。如果编译器不能够自动地推断出类型的话,只能像上面那样明确的传入 T 的类型,在一些复杂的情况下,这是可能出现的。


泛型函数的类型与非泛型函数的类型没什么不同,只是有一个类型参数在最前面。

泛型接口

接口能够描述 JavaScript 中对象拥有的各种各样的外形。除了描述带有属性的普通对象外,接口也可以描述函数类型。


为了使用接口表示函数类型,我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。


interface GenericIdentityFn {    <T>(arg: T): T;}
function identity<T>(arg: T): T { return arg;}
let myIdentity: GenericIdentityFn = 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>();

泛型约束

我们有时候想操作某类型的一组值,并且我们知道这组值具有什么样的属性。在 loggingIdentity 例子中,我们想访问 arg 的 length 属性,但是编译器并不能证明每种类型都有 length 属性,所以就报错了。


function loggingIdentity<T>(arg: T): T {    console.log(arg.length);  // Error: T doesn't have .length    return arg;}


相比于操作 any 所有类型,我们想要限制函数去处理任意带有 .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;}


浏览 33
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报