TypeScript-泛型

泛型(Generics)

指在定义接口，函数等类型的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性，使用泛型可以复用类型并且让类型更加灵活

泛型接口-interface

语法：在 interface 接口类型的名称后面使用 <T> 即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型

interface ResData<T> {}

效果：

思路：

1️⃣ 找到可变的类型部分通过泛型<T>抽象为泛型参数(定义参数)

// 定义泛型,把可变的部分抽象成泛型参数T
interface ResData<T> {
  code: number
  msg: string
  data:T
}

2️⃣ 在使用泛型的时候，把具体类型传入到泛型参数位置(传参)

// 定义具体类型，使用泛型的时候传入到参数的位置
interface User {
  name: string
  age: number
}

interface Goods {
  id: number
  goodName: string
}

let User:ResData<User> = {
  code:200,
  msg:'success',
  data:{
    name: 'lili',
    age:18
  }
}
let Goods:ResData<Goods> = {
  code:200,
  msg:'success',
  data:{
    id: 1,
    goodName:'裙子'
  }
}
console.log(User)
console.log(Goods)

泛型别名- type

语法：在类型别名type的后面使用<T>即可声明一个泛型参数,接口里的其他成员都能使用该参数的类型

type ResData<T> = {}

// 定义泛型,把可变的部分抽象成泛型参数T
type ResData<T> = {
  code: number
  msg: string
  data:T
}

// 定义具体类型，使用泛型的时候传入到参数的位置
type User = {
  name: string
  age: number
}

type Goods = {
  id: number
  goodName: string
}

let User:ResData<User> = {
  code:200,
  msg:'success',
  data:{
    name: 'lili',
    age:18
  }
}
let Goods:ResData<Goods> = {
  code:200,
  msg:'success',
  data:{
    id: 1,
    goodName:'裙子'
  }
}
console.log(User)
console.log(Goods)

泛型函数

语法：在函数名称的后面使用<T>即可声明一个泛型参数,整个函数中(参数、返回值、函数体) 的变量都可以使用该参数的类型

function fn<T>(){}

// 泛型函数
function createArray<T>(length: number,value: T){
  let res = []
  for(let i = 0; i < length; i++) {
    res[i] = value
  }
  return res
}

createArray<number>(3,100)
createArray<string>(3,'100')

泛型约束

作用：泛型的特点：灵活不确定；有时候泛型函数的内部需要访问一些特定类型的数据才有的属性，此时会有类型错误，需要通过泛型约束解决

interface LengthObj {
  length: number
}

// 限制了obj身上必须y有length属性才能通过校验
function logLen1<T extends LengthObj>(obj: T){
  console.log(obj.length)
}

logLen1({length: 10})
logLen1(['100'])

总结：

1️⃣ 泛型的好处是什么？

增加类型的 复用性 和 灵活性

2️⃣ 泛型实现的基本方法是什么？

找到类型不确定的类型部分，定义泛型参数
定义具体类型，传入泛型参数的位置

3️⃣ 泛型约束的作用是什么？

既可以保留泛型的灵活性，又做了特定的限制