泛型(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️⃣ 泛型约束的作用是什么?
既可以保留泛型的灵活性,又做了特定的限制