泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。一般用于解决类、方法、接口的复用性，以及对不特定数据类型的支持（类型校验）。
创建一个函数，要求函数的返回值就是函数的参数，参数类型是任意的。可以通过如下方式实现：
function echo(val: any): any {
return val
}
以上使用any类型有几个不足之处：首先any类型ts会放弃类型检查，失去使用ts的初衷及优势；其次，既然返回值是any类型，并不能准确的定义返回值的类型。此时泛型就派上用场了。
泛型函数
实现一个函数，函数接收两个参数，返回值是参数1为参数，参数2为元素组成的数组。
function createArray<T>(length: number, value: T): Array<T> {
const result: T[] = []
for (let i = 0; i < length; i++) {
result[i] = value
}
return result
}
以上就是一个泛型函数， T 代表任意类型。
泛型函数调用方式：
- 传入所有参数，包括类型参数
createArray<string>(3, 'x') // ['x', 'x', 'x']
- 利用类型推论，直接传入参数
createArray(3, 'x')
多个类型参数
实现一个函数，参数是长度为2、元素为任意类型的元组，返回位置交换后的元组。
function exchange<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]]
}
exchange([7, 'sina']); // ['sina', 7]
通过类型别名定义泛型函数
type IGetArr<T> = (val: T, length: number) => T[]
const getArr: IGetArr<number> = (val: number, length: number = 3): number[] => {
return Array(length).fill(val)
}
getArr('4', 5)
泛型约束
在泛型函数内部使用泛型变量时，由于我们预先并不知道它是哪种类型，所以不能随意操作其属性和方法（比如：获取泛型变量的length），但 T 不一定包含该属性，所以编译器会报错。
function getLength<T>(arg: T): T {
console.log(arg.length) // Property 'length' does not exist on type 'T'.
return arg
}
此时就需要对泛型变量进行约束，要求其必须包含length属性，这种操作我们称之为泛型约束。
定义接口来描述约束条件，并用 extends 关键字实现约束。
如下泛型函数的参数必须具有length属性：
interface restrainLength {
length: number
}
function getLength<T extends restrainLength>(arg: T): T {
console.log(arg.length)
return arg
}
多个参数时也可以在泛型约束中使用类型参数
多个参数的泛型函数，一个类型参数被另一类型参数所约束。
定义一个函数， 接受两个参数 第一个是对象 obj，第二个是第一参数对象中的key，返回 obj[key]。
使用 keyof 关键字约束。
function getValue<T, K extends keyof T>(obj: T, key: K) {
return obj[key]
}
const obj = { a: 1, b: 2, c: 3 }
getValue(obj, 'a')
getValue(obj, 'd') // Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.
泛型接口
可以通过接口的方式定义函数需要遵循的约束和规范。
interface IFoo {
(name: string): string
}
let getInfo: IFoo = function(name: string): IFoo {
return `the name is ${name}`
}
这种方式不具有普适性，name的类型被限制死了。那么通过使用含有泛型的接口定义函数，如下：
interface IFoo {
<T>(length: number, val: T): Array<T>
}
const getArr: IFoo = function<T>(length: number, val: T): Array<T> {
return Array(length).fill(val)
}
console.log(getArr(3, 'sian')) // ["sian", "sian", "sian"]
把泛型参数提前到接口名上，就可以知道使用的具体是哪个泛型类型，这样接口里的其他成员也能知道这个参数的类型。
interface IFoo<T> {
(length: number, val: T): Array<T>;
}
function getArr<T>(length: number, val: T): Array<T> {
return Array(length).fill(val)
}
const getFoo: IFoo<string> = getArr
getFoo(3, 'sina') // ['sina', 'sina', 'sina']
注意： 此时使用泛型接口时， 需要定义泛型的类型
泛型类
与泛型接口类似，泛型也可以用于类的类型定义中，泛型类使用 <> 括起泛型类型，跟在类名后面：
class Test<T> {
foo: T
constructor(foo: T) {
this.foo = foo
}
echo(val: T): T {
return val
}
}
const test = new Test<number>(12)
test.echo(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
}
createArray<number>(3, 3)
网友评论