泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。一般用于解决类、方法、接口的复用性，以及对不特定数据类型的支持（类型校验）。
创建一个函数，要求函数的返回值就是函数的参数，参数类型是任意的。可以通过如下方式实现：
function echo(val: any): any {
return val
}
以上使用any类型有几个不足之处：首先any类型ts会放弃类型检查，失去使用ts的初衷及优势；其次，既然返回值是any类型，并不能准确的定义返回值的类型。此时泛型就派上用场了。
1. 泛型函数
实现一个函数，函数接收两个参数，返回值是参数1为length，参数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)
2. 泛型约束
在泛型函数内部使用泛型变量时，由于我们预先并不知道它是哪种类型，所以不能随意操作其属性和方法（比如：获取泛型变量的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"'.
keyof 索引类型查询操作符
对应任何类型T,keyof T的结果为该类型上所有公共属性名的联合：
interface Eg1 {
name: string,
readonly age: number,
}
// T1的类型实则是 "name" | "age"
type T1 = keyof Eg1
class Eg2 {
private name: string;
public readonly age: number;
protected home: string;
}
// T2实则被约束为 "age"
// 因为name和home不是公有属性，所以不能被keyof获取到
type T2 = keyof Eg2
interface Eg1 {
name: string,
readonly age: number,
}
interface Eg2 {
sex: string
}
// T1的类型实则是 "name" | "age" | { sex: string }
type T1 = keyof Eg1 | Eg2
let a: T1 = "name"; // OK
let b: T1 = "age"; // OK
let c: T1 = { // OK
sex: "男"
}
注意：keyof any 的结果为 string | number | symbol，因为对象的key常见的类型就是这三种
TypeScript 2.8 作用于交叉类型的keyof被转换成作用于交叉成员的keyof的联合。 换句话说，keyof (A & B)会被转换成keyof A | keyof B。 这个改动应该能够解决keyof表达式推断不一致的问题。
type A = { a: string };
type B = { b: string };
type T1 = keyof (A & B); // "a" | "b"
type T2<T> = keyof (T & B); // keyof T | "b"
type T3<U> = keyof (A & U); // "a" | keyof U
type T4<T, U> = keyof (T & U); // keyof T | keyof U
type T5 = T2<A>; // "a" | "b"
type T6 = T3<B>; // "a" | "b"
type T7 = T4<A, B>; // "a" | "b"
3. 泛型接口
可以通过接口的方式定义函数需要遵循的约束和规范。
interface IFoo {
(name: string): string
}
let getInfo: IFoo = function(name: string): string{
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>;
}
const getFoo: IFoo<string> = function (
length: number,
val: string
): [string, number] {
return [val, length]
}
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']
注意： 此时使用泛型接口时， 需要定义泛型的类型
4. 泛型类
与泛型接口类似，泛型也可以用于类的类型定义中，泛型类使用 <> 括起泛型类型，跟在类名后面：
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> {
const result: T[] = []
for (let i = 0; i < length; i++) {
result[i] = value
}
return result
}
createArray<number>(3, 3)
在.tsx中使用尾随逗号
只有一个泛型参数时，尾随逗号是必须的。否则会出现编译错误。
const returnInArray = <T,>(value: T): T[] => {
return [value];
};
const strArray = returnInArray<string>('hello');
const numArray = returnInArray<number>(360);
如果有多种类型，则不必使用尾随逗号，例如：<T, Y>
如果使用了尾随逗号文件还报错，可以扩展一个空对象。
const carr = <T extends unknown>(val: T): T[] => {
return [val]
}
carr<string>('3')
carr(4)
T extends unknown 约束不执行任何操作，并且仅当处理.tsx文件时出现语法错误时才需要该约束。
