理解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'
这里我们明确的指定了 T
是 string
类型,并做为一个参数传给函数,使用了<> 括起来而不是()。
第二种方法更普遍。利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定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;
}