登录TypeScript 类型推导还可以这么用？
一、为什么需要TypeScript类型推导
肯定是为了节省我们的代码，减少冗余，下面举一个例子，写一个递减函数
下面代码中，写了三个类型都是number，那么我们是不是可以思考，如何减少冗余呢，ts给咱们提供了泛型
正常书写
const desc = (a: number): number => {
return --a
}
desc(2) // 1
泛型
const desc = <T>(a: T): number => {
return --a
}
desc(3) // 2
这个例子在项目中的应用场景可谓之少之又少，也可以说，压根不可能出现。
那么衍生出一个问题：有没有更好的方法，自动推导我特定的入参返回特定类型。
有的兄弟，有的!!
我先把公共代码抽出来
// 公共属性
type Pet = {
name: string
age: number
}
// 映射类型
type OptionsMap = {
dog?: {
bark: string
barkVolume: number
} & Pet
cat?: {
favoriteToy: string
furLength: 'short' | 'medium' | 'long'
} & Pet
}
场景：
- 组件封装，表单、表单组件类型封装，例如通过表单项type来确定是input、select...就可以明确props类型了
- 业务逻辑封装，在重复的业务逻辑中我们通常会抽离，通过key去调用，那么对应的参数不同，也会用到泛型、自动推导
二、映射 + 类型推导
我们可以通过映射、类型推导相互配合就能得到特定的类型了，废话少说，上代码
2.1. 先来一个函数案例，通过参数1推导出参数2
const fn = <T extends keyof OptionsMap>(type: T, props: OptionsMap[T]) => {}
fn('cat', {})
/*
类型“{}”的参数不能赋给类型“{ favoriteToy: string; furLength: "short" | "medium" | "long"; } & Pet”的参数。
类型“{}”缺少类型“{ favoriteToy: string; furLength: "short" | "medium" | "long"; }”中的以下属性: favoriteToy, furLengthts-plugin(2345)
*/
- 上面代码声明了宠物映射属性，通过函数的第一个参数去映射中自动匹配第二个参数
- 恭喜你现在已经掌握类型推导的基础了
2.2. 下面我们再来一个写一个生成集合，里面数据项都是通过推导出来的
type SinglePet<T extends keyof OptionsMap> = {
type: keyof OptionsMap
options: OptionsMap[T]
}
type Pets = SinglePet<keyof OptionsMap>[]
const petHome: Pets = [
{
type: 'dog',
options: {
name: '旺财',
age: 2,
bark: '汪汪汪',
barkVolume: 2,
},
},
{
type: 'cat',
options: {
name: '小白',
age: 1,
favoriteToy: '玩具鸟',
furLength: 'short',
},
},
]
数组里的每一项options，我们都是通过type推导出来的。
三、extends + 类型推导
extends和映射作用都是为了自动推导出另一个属性或者另一个类型，作用是一样的，具体使用哪种，可以根据项目而定
type PetKeys = 'dog' | 'cat' | 'fish' | 'bird'
type PetOptions<T extends PetKeys> = T extends 'dog'
? OptionsMap['dog']
: T extends 'cat'
? OptionsMap['cat']
: {
text: number
}
type OptionItem<T extends PetKeys> = PetOptions<T>
type Item<T extends PetKeys = PetKeys> = {
type: T
options: OptionItem<T>
}
type PetHome = Item[]
const petHome: PetHome = [
{
type: 'dog',
options: {
name: '旺财',
age: 2,
bark: '汪汪汪',
barkVolume: 10,
},
},
{
type: 'bird',
options: {
text: 1,
},
},
{
type: 'cat',
options: {
name: '小白',
age: 2,
favoriteToy: '玩具鸟',
barkVolume: 5,
furLength: 'long',
},
},
]
上面这段代码主要是使用extend判断对应的类型，在项目中封装很常见，也利于后期拓展，其中核心代码为
type Item<T extends PetKeys = PetKeys> = {
type: T options: OptionItem<T>
}
四、总结
类型推导可以不用，不能不会，有ts的项目必出现这种场景，当然也可以用AI 😂
最后告诉大家几个泛型、推导的注意事项
泛型参数，也就是本文中的T，如果一个使用项中的T已经明确类型了，其他地方也会跟着明确。
泛型参数一旦确定就不会再变，所有咱们如果使用默认值时，引用的类型必须要传递，否则就是按默认值算了。
最后祝大家日入过万，给俺点点关注、点点赞
