泛型概述

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

什么时候使用泛型
1.当函数、接口或类处理各种数据类型时
2.当函数、接口或类在多个位置使用该数据类型时

function identity (arg: number): Array<number> {
    return [arg];
}

扩展函数的通用型

function identity<T>(arg: T): Array<T> {
    console.log(typeof arg);
    return [arg];
}

const output1 = identity<string>("str1"); // ['str1']
const output2 = identity<number>(100); // [100]

T代表类型，在定义泛型时通常用作第一个类型变量名 T可以用任何有效的名称替换 且可引入多个类型变量

function identities<T, U>(arg1: T, arg2: U): [T, U] {
    return [arg1, arg2];
}
const output3 = identities<string, number>("hello", 100); // ['hello', 100]

React TS项目中的约定写法

interface IProps {
    name: string;
    id: number;
}
interface IState { 
  //...
}

const someComp: React.FC<IProps> = () => {
    //...
}
class OrderDetail extends React.Component<IProps, IState> {
    //...
}

泛型约束

有时，我们可能希望对每个类型变量接受的类型数量进行限制——这就是泛型约束所做的，使用约束来确保类型属性的存在

// 不确定T是否有length属性，会报错
function identity<T>(arg: T): T {
   console.log(arg.length);
   return arg;
}

interface Lengthwise {
    length: number;
}
function identity<T extends Lengthwise >(arg: T): T {
   console.log(arg.length);
   return arg;
}

使用泛型约束，检验我们传入函数的对象是否存在这个属性，保证运行时不发生错误

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

泛型接口

before1.png

before2.png

after1.png

after2.png

泛型类

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; };