头图

问题是什么?

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 进阶用法就以上这些,大家还有什么补充的呢?欢迎评论。


机器马
306 声望8 粉丝

技术冲关,Work in English