14.TS泛型

68 阅读1分钟

泛型相当于动态类型

不是一开始就定义好的

而是在使用过程中动态传进去的

// 1.单个类型 <T>代表函数执行的时候可以传入一个类型T
function fun<T>(a: T, b: T): Array<T> {
  return [a, b]
}
// 函数执行传入类型为number那么 上面的T就全替换为number
fun<number>(1, 2)
// 函数执行传入类型为string那么 上面的T就全替换为string
fun<string>('Yang', 'Nuo')

// 2.多个类型
function run<T, A>(a: A, b: T, c: A): Array<T | A> {
  return [a, b, c]
}
run<string, number>(1, '2', 3)

// 3.泛型约束
interface Len {
  length: number
}
// T类型上必须有一个属性length并且类型为number
function getLength<T extends Len>(v: T): number {
  return v.length
}

getLength('Yang')
// 这样就报错了 因为数字类型没有属性length
getLength(520) 

// 使用keyof约束泛型对象
// K继承类型T 可选值为类型T的key组成的联合类型 这里K相当于 name | gender
// keyof 是一个遍历操作
function prop<T, K extends keyof T>(o: T, key: K): any {
  return o[key]
}

const obj = {
  name: 'Yang',
  gender: '23',
}

prop(obj, 'name') // 正常
prop(obj, 'sex') // 错误 类型“"sex"”的参数不能赋给类型“"name" | "gender"”的参数

// 4.泛型类 就是new的时候可以传入类型
class Person<T> {
  // 定义属性
  name: T
  // 构造器
  constructor(name: T) {
    this.name = name
  }
  // 方法
  getName(): T {
    return this.name
  }
}
const p = new Person<string>('Yang')
console.log(p.getName())