问题是什么?
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 进阶用法就以上这些,大家还有什么补充的呢?欢迎评论。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。