泛型在Ts中非常重要，像vue3就是用Ts编写的里面用到了非常多的泛型

函数泛型

1.数字类型的函数

 function num(a:number,b:number):Array<number>{
     return [a,b]
 }
 num(1,2)

2.字符类型的函数

    function str(a:string,b:string):Array<string>{
        return [a,b]
    }
    str('天下','无敌')

两个实现的功能是一样的，这时候我们就可以使用泛型来优化

泛型优化


function add<T>(a:T,b:T):Array<T>{
    return [a,b]
}

    add<number>(1,2)
    add<string>('1','2')

我们也可以使用不同的泛型参数名，只要在数量和使用方式上能对应就可以

function Sub<X,U>(a:X,b:U):Array<X | U> {
    const params:Array<X|U> = [a,b]
    return params
}

Sub<number,Boolean>(1,true)

定义泛型接口

声明接口的时候在名字后加一个<参数> 使用的时候传递类型

    interface A<T> {
      (arg: T):T
    }

    function fn<T>(arg:T):T{
        return arg
    }

    let result:A<number> = fn

    result(213)

对象字面量泛型

    let foo: {<T>(arg: T):T}

    foo = function<T>(arg:T):T{
        return arg
    }

    foo(123)

泛型约束

当我们希望在一个泛型的变量上面，获取某个属性，但是，有的数据类型是没有该属性的

例如

function B<T>(item:T){
    return item.length
}

这时候我们就可以使用泛型约束于是，我们就得对使用的泛型进行约束，我们约束其为具有length属性的类型，这里我们会用到interface,代码如下

interface Len {
   length:number
}
 
function getLegnth<T extends Len>(arg:T) {
  return arg.length
}
 
getLegnth<string>('123')

使用keyof 约束对象

其中使用了TS泛型和泛型约束。首先定义了T类型并使用extends关键字继承object类型的子类型，然后使用keyof操作符获取T类型的所有键，返回类型时是联合类型，最后利用extends关键字约束K类型必须为keyof T 联合类型的子类型

let obj = {
    name:'小王',
    sex:"女"
}

type Key = keyof typeof obj

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

oa(obj,'name')

泛型类

声明方法跟函数类似名称后面定义<类型> 使用的时候确定类型 new Sub()

class Sub<T>{
   attr: T[] = [];
   add (a:T):T[] {
      return [a]
   }
}
 
let s = new Sub<number>()
s.attr = [1,2,3]
s.add(123)
 
let str = new Sub<string>()
str.attr = ['1','2','3']
str.add('123')

Ts 泛型