泛型
泛型是指在定义函数、接口、或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
function createArray(length: number, value: any): Array<any> {
let result = [];
for(let i = 0; i < length; i++){
result[i] = value;
}
return result;
}
createArray(3, 'z') //['z', 'z', 'z']
在这个例子中,我们使用了数组泛型来定义返回值的类型。但是他并没有准确的定义返回值的类型,Array<any>
允许数组的每一项都为任意类型。但如果我们传入的value是number
类型,那么预期数组每一项都应该是number
类型。
这个时候就需要使用泛型了:
function createArray<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++){
result[i] = value;
}
return result;
}
createArray<string>(3, 'z') ; //['z', 'z', 'z']
我们在函数名后添加了<T>
,其中T
用来代指任意输入的类型,在后面的输入value: T
和输出Array<T>
中即可使用。
在调用函数的时候,可以指定它具体的类型为string
。也可以不手动指定,让类型推断自动推算出来。
多个类型参数
定义泛类的时候,可以一次定义多个类型参数:
function fn<T, U>(tuple: [T, U]): [U, T]{
return [tuple[1], tuple[0]];
}
fn(['zink', 21]) //[21, 'zink']
泛型约束
在函数内部使用泛型变量的时候,由于实现不知道它是哪种类型,所以不能随意的操作它的属性或方法:
function fn<T>(value: T): T{
console.log(value.length);
return value;
}
这个例子在编译时会报错,因为泛型T
不一定包含属性length
。这个时候,我们可以对泛型进行约束,只允许这个函数传入那些包含length
属性的变量。这就是泛型约束:
interface Lengthwise {
length: number;
}
function fn<T extends Lengthwise>(value: T): T{
console.log(value.length);
return value;
}
fn([1, 2, 3, 4]) //4
fn(666) //error
上例中,使用了extends
约束了泛型T
必须符合接口Lengthwise
的形状,也就是必须包含length
属性。
此时调用fn
,如果传入的value
不包含length
,那么在编译阶段就会报错。
多个参数类型之间也可以互相约束:
function fn<T extends U, U>(x: T, y: U): T{
for(let i in y){
x[i] = (<T>y)[id];
}
return x;
}
在这个栗子中,我们使用了两个类型参数,其中要求T
继承U
,这样就保证了U
上不会出现T
中不存在的字段。
泛类接口
我们知道,可以使用接口的方式来定义一个函数需要符合的形状:
interface SearchFn {
(source: string, subString: string): boolean;
}
let mySearch: SearchFn;
mySearch = function(source: string, subString: string) {
return source.search(subString) !== -1;
}
那么当然也可以用含有泛型的接口来定义函数的形状:
interface CreateArrayFn {
<T>(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFn;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for(let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x') //['x', 'x', 'x']
createArray(4, 5) //[5, 5, 5, 5]
进一步,我们可以把泛型参数提前到接口名上:
interface CreateArrayFn<T> {
(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFn<any>;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for(let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
createArray(3, 'x') //['x', 'x', 'x']
createArray(4, 5) //[5, 5, 5, 5]
注意,此时在使用泛型接口的时候,需要定义泛型的类型。
泛型类
与泛型接口类似,泛型也可以用于类的类型定义中:
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; };
泛型参数的默认类型
在TS2.3以后,我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数,从实际值参数中也无法推测出时,这个默认类型就会起作用。
function createArray<T = string>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}