ts 泛型

写在函数名或类名的后面 <>中 相当于一个占位符，运行的时候填入实际的类型

1、概念

在项目中我们不仅要创建一致的定义良好的API，同时也要考虑可重用性 组件不仅能支持当前的数据类型，还能支持未来的数据类型。可以用泛型来创建可重用的组件，一个组件可支持多个类型的数据，这样用户就可以用自己的数据类型来使用组件。

// 一个函数他的入参和返回值类型相同
function identity<T>(arg: T): T{ // T类型变量，它是一种特殊的变量，只用来表示类型而不是值
    return arg;
}
const a = identity('mh');
console.log('a,,,,', a);

//交换入参的值
function swap<T,U>(arg: [T, U]): [U,T]{
    return [arg[1], arg[0]]
}

const a = swap(['mh',18]);
console.log('a,,,',a);

2、约束泛型

interface IWithLength{
    length: number
}

function echoWithLength<T extends IWithLength>(arg: T){
 console.log(arg.length);
}

echoWithLength([1,2,3]); //3
echoWithLength('123');//3
echoWithLength({length: 10, max: 18});//10

3、泛型类

class Queue <T>{
    private data = [];
    push (item: T) {
        this.data.push(item)
    }
    pop () {
        this.data.shift()
    }
}

const numQueue = new Queue<number>()
numQueue.push(10)
console.log('numQueue', numQueue); // [10]

const strQueue = new Queue<string>()
strQueue.push('10')
console.log('strQueue', strQueue); // ['10']

4、interface上使用泛型

interface IKeyValue<T,U>{
   key: T,
   value: U
}

const kv1: IKeyValue<string, number> = {
    key: 'key',
    value: 1
}

const arr1: number[] = [1,2,3];
const arr2: Array<number> = [1,2,3]

interface IPlus<T> {
    (a: T, b: T): T
}

function plus (a,b){
    return a+b
}
const a: IPlus<number> = plus(10,10);
const b: IPlus<string> = plus('10',10);