【前端vue3】TypeScrip-泛型

泛型

如同一函数，只是类型不同，可以使用泛型
语法为函数名字后面跟一个<参数名> 参数名可以随便写 例如C
例如：

function Add<C>(a: C, b: C):Array<C> {
    return [a,b]
}

Add(1,2) //function Add<number>(a: number, b: number): number[]
Add("1","2") //function Add<string>(a: string, b: string): string[]

如使用不同类型

function Add<C, D>(a: C, b: D): Array<C | D> {
    return [a, b]
}

Add(1, "2") //function Add<number, string>(a: number, b: string): (string | number)[]

设置默认类型

function Add<C=number, D =string>(a: C, b: D): Array<C | D> {
    return [a, b]
}

Add()

定义泛型接口

声明接口的时候 在名字后面加一个<参数>

interface MyInter<T> {
    (arg: T): T
 }
  
 function fn<T>(arg: T): T {
    return arg
 }
  
 let result: MyInter<number> = fn
  
 result(123)

对象字面量泛型

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

泛型约束

例如需要获取泛型变量的length参数，但是有的数据类型没有length

function getLegnth<T>(arg:T) {
  return arg.length
}

所以我们需要对泛型进行约束
泛型+extend +类型

interface len{
    length : number;
}

function getLegnth<T extends len>(arg:T) {
    return arg.length
  }

使用keyof约束对象

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

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

let a ={
    name: 'xiaoc',
    age: 36,
}

console.log(xiaoc (a,"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')