【Typescript】实际开发中常用进阶技巧

问题是什么？

TS 的进阶部分——类型操作，到底哪些部分是在业务开发中用得上的技巧？我们来列举实际问题来看看。

类型变换

「枚举」变成「联合」

当我们制作组件的时候，为了避免重复，一些字符类型的变量，用枚举来创建是十分合适的。比如一个日期组件里定义星期一到三：

enum Weekday {
  MON = 'monday',
  TUE = 'tuesday',
  WED = 'wednesday'
}

这样无论在渲染还是计算的时候，我们都能用 Weekday.MON 来避免重复和写错单词。但是在使用组件的时候，导出的属性却不能正确地提示类型：

interface DayProps{
  name: Weekday
}
​
<Day name='monday'/> // ⚠️ String 'monday' cannot be used to enum type Weekday

此时，除了从组件库导出 Weekday 的方式之外，还能通过创建“字符串字面量联合类型（String literal union type from enum）”的方式解决：

interface DayProps{
  name: `${Weekday}`
}
​
<Day name='monday'/> // Day.name: ('monday'|'tuesday'|'wednesday')

「对象」变成「联合」

单个配置可以用枚举代替对象，但如果是多个配置合成一个配置的时候，就只能用对象了。比如

const workdays = {
  Mon: 1,
  Tue: 2,
  Wed: 3,
  Thu: 4,
  Fri: 5
}
const weekends = {
  Sat: 6,
  Sun: 7
}
​
const weekdays = { ...workdays, ...weekends }

然后要正确地提示到“星期几”的值，可以先用 keyof 封装一个 valueOf<T>，方便我们的操作。

type valueOf<T> = T[keyof T];
type Weekday = valueOf<typeof weekdays> // Weekday: string

从上面可以看到，Weekday 只解析成了 string，并不是我们期待的，精确的取值范围 1|2|3...|7。原来是 TS 只能对 readonly 的类型或者数据进行精确解析，所以我们需要定义变量的时候，声明它们是只读的类型。

const workdays = {
  Mon: 1,
  Tue: 2,
  Wed: 3,
  Thu: 4,
  Fri: 5
} as const //  转变为“只读”类型，让其值可以被正确地解析
​
const weekends = {
  Sat: 6,
  Sun: 7
} as const
​
const weekdays = { ...workdays, ...weekends }
type Weekday = valueOf<typeof weekdays> // Weekday: (1|2|3|4|5|6|7)

「数组」变成「interface」

当我们创建一个，各种元素并不怎么相关，仅仅只是用途相同的集合的时候，会用到字符串数组。比如 icon 图片的数组

const icons = ['banana.png', 'avata.svg', 'water.jpg']
​
// 由于图片自带名字，所以直接来生成对象使用
const iconCollection = icons.reduce((acc, path) => {
  const name = path.split('.')[0]
  return Object.assign(acc, { [name]: path })
}, Object())
​
/*{
  banana: "banana.png",
  avata: "avata.svg",
  water: "water.jpg"
}*/

然后我们想正确地提示 iconCollection 的类型，是否可以用上面 as const 的技巧，把它转换成只读类型呢？

这是不行的！因为它是动态地生成的对象，无法被静态地解析。要解析，只能是对静态的 icons 数组下手，把它转换成 interface。

const icons = ['banana.png', 'avata.svg', 'water.jpg'] as const // Trans to readonly
​
type SplitName<T> = T extends `${infer P}.${string}` ? P : never; // 利用类型推导（infer），得到文件名 P
type IconCollection = Record<SplitFileName<(typeof icons)[number]>, string> // IconCollection: {banana: string, avata: string, water: string}

函数的精确类型提示

重载

一个好的函数，最好就是单一职责，且一种输入，对应一种输出。但有时候确实会有，一个功能处理不同数据类型的情况，比如以下这个函数

/**
 * 改变参数类型，数字转字符串，字符串则转数字
 * @param x
 */
function changeType(x: string|number): number|string {
  return typeof x === 'string' ? Number(x) : String(x)
}

这个类型声明虽然没有错误，但并不能得到精准的提示。我们希望类型提示，与函数描述完全一致，这时候重载就上场了。

function changeType(x: number): string;
function changeType(x: string): number;
/**
 * 改变参数类型，数字转字符串，字符串则转数字
 * @param x
 */
function changeType(x) {
  return typeof x === 'string' ? Number(x) : String(x)
}
​
changeType(123) // function changeType( x: number): string
changeType('456') // function changeType( x: string): number

类型分发

继续沿用上面的例子，我们可以用类型分发（distribution）来根据参数类型，推导输出类型。

/**
 * 改变参数类型，数字转字符串，字符串则转数字
 * @param x
 */
function changeType<T>(x: T): T extends number ? string : T extends string ? number : never {
  return typeof x === 'string' ? Number(x) : String(x)
}

最后

我发现的业务项目中常见的 TS 进阶用法就以上这些，大家还有什么补充的呢？欢迎评论。