Typescript 简单类型体操之”infer的妙用“--TS类型单词提取

前言

  • 我经常遇到一个枚举需要与某个类型相匹配的情况,然后就产生了强耦合,每次修改那个类型,相应的枚举也需要跟着改,有时候实在嫌麻烦,也就只能使用any或者其他简单类型来声明了,舍弃了枚举,但是这就使得类型模糊不清,TS 的意义也就无法很好的体现了
  • 在无意间,了解到了 infer 关键词,学习之后,发现可以解决以上问题,一起来看下吧
  • (如果这篇文章写得哪里不好,欢迎友好评论)

代码开始!!

假设有这么一段原始功能

  • 【期望需求】 : findPuzzle 函数中的 pType 参数能够是符合 puzzleTypes 对象的 keys 中表示动物的单词,即 pType 只能是 Cat/Dog/Rabbit,否则 TS 就应该报类型错误,而且这个 puzzleTypes 对象是满足一定规则的且经常会去改动的数据,即其中的 key 可能以 puzzle${animal}Toy 这种规则动态出现
  • 【原因描述】:我们曾经的写法就会像下面的代码一样,用 string 去声明 pType 类型,因为我们当时只会用静态枚举,使用静态枚举类型的话,每次修改 puzzleTypes 数据后,对应的枚举也要一起修改,这就很麻烦了;当然我们也想到过 keyof,可惜keyof只能把完整的key提取出来,我们只希望把其中的某个单词提取出来作为动态枚举来使用
typescript 复制代码
interface PuzzleTypes {
  puzzleCatToy: string;
  puzzleDogToy: string;
  puzzleRabbitToy: string;  
}
// 我们假设这个 mock 数据实际上是一份满足一定规则的且经常会去改动的数据,即其中的 key 可能以 `puzzle${animal}Toy` 这种规则动态出现
const puzzleTypes: PuzzleTypes = {
    puzzleCatToy: 'red-cat-puzzle',
    puzzleDogToy: 'point-dog-puzzle',
    puzzleRabbitToy: 'purple-rabbit-puzzle',
}

interface ParamsFindPuzzle {
  pType: string
}
const findPuzzle = ({pType}:ParamsFindPuzzle) => {
    return Object.keys(puzzleTypes).find(pk => pk.includes(pType))
}

// -- 调用
const canfind = findPuzzle({pType: 'bear'})

新方案

  • 1 - 先认识新方案的基础用法
typescript 复制代码
type ExtractAnimal<S extends string> = S extends `puzzleDogToy` ? 'Dog' : 'not find'

// 通过上面的 ExtractAnimal 类型声明,我们这里得到的 PuzzleAnimal 类型是 'not find'
type PuzzleAnimal = ExtractAnimal<'bear'>
  • 2 - 继续改进为动态的模版字符串声明方式
    • 从这里就能看出来了,借用 infer 关键词可以实现提取部分字符串来作为类型
    • 那 infer 的含义是:类型推断,infer 只能用在 extends 判断且为true的子句中
typescipt 复制代码
type ExtractAnimal<S extends string> = S extends `puzzle${infer R}Toy` ? R : S

// 此时 PuzzleAnimal 类型是我们传递的 'bear',也就是上面 ExtractAnimal 范型中的 S
type PuzzleAnimal = ExtractAnimal<'bear'>
  • 3 - 运用到我们原来的代码中
typescript 复制代码
interface PuzzleTypes {
  puzzleCatToy: string; 
  puzzleDogToy: string;
  puzzleRabbitToy: string;
}

const puzzleTypes = {
  puzzleCatToy: 'red-cat-puzzle',
  puzzleDogToy: 'point-dog-puzzle',  
  puzzleRabbitToy: 'purple-rabbit-puzzle',
};

type PuzzleKeys = keyof PuzzleTypes; 

type PuzzleAnimals = PuzzleKeys extends `puzzle${infer S}Toy` ? S : never;
// --

interface ParamsFindPuzzle {
  pType: PuzzleAnimals
}
const findPuzzle = ({pType}:ParamsFindPuzzle) => {
    return Object.keys(puzzleTypes).find(pk => pk.includes(pType))
}

// -- 调用:此时这里的 pType 传 'Bear' 就会报 TS 类型错误啦
const canfind = findPuzzle({ pType: 'Bear' })
  • 如此一来,以后我们对 PuzzleTypes 进行增删(熟悉名规则不变的情况下),findPuzzle({ pType: 'Bear' }) 函数中的 pType 参数类型声明也就会随之发生变化了

还有彩蛋哦!!

如果 puzzleTypes 是数组呢,怎么办?
  • 直接上代码
typescript 复制代码
// as const 也是关键,只有静态的才能被下面的 infer 进行推断提取
const puzzleTypes = ['puzzle-cat', 'puzzle-dog', 'puzzle-rabbit'] as const;

type ExtractAnimals<T extends string> = T extends `puzzle-${infer S}` ? S : T;
// --

interface ParamsFindPuzzle {
  pType: ExtractAnimals<typeof puzzleTypes[number]> // 通过 typeof puzzleTypes[number] 获取对应的类型
}
const findPuzzle = ({pType}:ParamsFindPuzzle) => {
    return Object.keys(puzzleTypes).find(pk => pk.includes(pType))
}

// -- 调用:同样的,这里会有清晰 TS 类型提示
const canfind = findPuzzle({ pType: 'bear' })

重点重提!

【infer】
  • 的含义:
    • 类型推断时,infer 只能用在 extends 判断且为 true 的子句中,可用于推断相应的类型
    • 虽然这里的例子属于比较简单的,但是 infer 是很强大的,灵活运用 infer 可以让 TS 写的更得体,可以解决我们代码中很多类型声明模糊不清的问题
相关推荐
^^为欢几何^^8 分钟前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang13 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘40 分钟前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
编程零零七4 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
北岛寒沫5 小时前
JavaScript(JS)学习笔记 1(简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组)
javascript·笔记·学习
everyStudy5 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
(⊙o⊙)~哦6 小时前
JavaScript substring() 方法
前端
无心使然云中漫步6 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者6 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_7 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js