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提取出来，我们只希望把其中的某个单词提取出来作为动态枚举来使用

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 - 先认识新方案的基础用法

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的子句中

type ExtractAnimal<S extends string> = S extends `puzzle${infer R}Toy` ? R : S

// 此时 PuzzleAnimal 类型是我们传递的 'bear'，也就是上面 ExtractAnimal 范型中的 S
type PuzzleAnimal = ExtractAnimal<'bear'>

• 3 - 运用到我们原来的代码中

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 是数组呢，怎么办？

• 直接上代码

// 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 写的更得体，可以解决我们代码中很多类型声明模糊不清的问题