您现在的位置是：首页 > 文章详情

业务代码里的 TypeScript 小技巧

日期：2024-07-26点击：107收藏

本文将会极致贯彻实用主义，介绍一些可以直接上手用的 TypeScript 技巧，新手友好，不需要了解背后的原理与规则（但也提供了简单介绍），只要对着特定场景套公式就好了，就让我们把事情变得再简单一些吧！

使用 never 类型检查 switch case 语句

在处理可能以多种形式成立的条件时，我们通常会使用 switch case 语句，一个结合 TypeScript 的常见例子是处理枚举的各个成员值：

declare enum Color { Red, Yellow, Blue,}
declare let color: Color;
switch (color) { case Color.Red: // do something break;
 case Color.Yellow: // do something break;
 case Color.Blue: // do something break;
 default: break;}

目前为止没什么问题，但如果你哪天加了一个枚举成员，但是忘记了对应增加一个处理分支，比如 Color.Pink 没有被处理，那使用粉色的在逃公主们很可能就直接卸载你的应用了。

这种情况下，我们可以使用 TypeScript 的 never 类型，来确保枚举或联合类型的所有分支都被处理，比如上面的例子：

declare enum Color { Red, Yellow, Blue, Pink,}
declare let color: Color;
switch (color) { case Color.Red: // do something break;
 case Color.Yellow: // do something break;
 case Color.Blue: // do something break;
 default: // 不能将类型“Color”分配给类型“never”。 let exhaustiveCheck: never = color;
 break;}

相比起在 default 分支中 throw new Error('Unhandled color') ，使用 never 类型进行检查，能够在开发阶段（最晚也就是构建阶段）就提前警示可能的错误。

公式：

let exhaustiveCheck: never = color;

实现原理：

在 switch case 或 if else 语句中，随着变量的类型成员不断被对应的分支认领，其类型会在后续的代码控制流中被移除，当所有类型成员都被移除时，TypeScript 会用 never 类型描述其类型，而 never 类型的变量无法被赋给除了 never 类型以外的值。

因此，在这个例子中，如果有遗漏的类型分支，那么 color 的类型就不会被描述为 never，就会导致类型不兼容的错误。


使用互斥类型替代联合类型

我们经常使用联合类型描述一组相近的实体类型，比如我们希望一个变量要么符合游客 Visitor 类型，要么符合注册用户 Registered 类型，不允许同时符合（即同时拥有 referer 与 email 这两个属性）。一般我们会想到使用联合类型 User：

interface Visitor { referer: string;}
interface Registered { email: string;}
type User = Visitor | Registered;

但这其实是个误区，因为联合类型不会约束「不能同时符合」这一点：

const user: User = { referer: 'www.google.com', email: 'linbudu@qq.com',};

这可能会导致后续的代码处理出现问题，比如可能有判断 user.email 存在就认为它是已注册用户的逻辑。

为了表示「不能同时拥有」，我们可以使用互斥类型 XOR：

type XORUser = XOR<Visitor, Registered>;
// 属性“email”的类型不兼容。const user1: XORUser = { referer: 'www.google.com',};
user1.email; // undefineduser1.email = 'linbudu@qq.com'; // X
// 属性“email”的类型不兼容。const user2: XORUser = { referer: 'www.google.com', email: 'linbudu@qq.com',};

XOR 的两个类型参数表示这两个类型互斥，因此你也可以实现「要么同时存在，要么同时不存在」的属性绑定，只需要为其中一个参数指定 {} 类型即可。

interface Registered { email: string; registerTime: number; level: number;}
type XORStruct = XOR<{}, Registered>;
const val1: XORStruct = {}; // √
// Xconst val2: XORStruct = { email: 'linbudu@qq.com',};
// √const val3: XORStruct = { email: 'linbudu@qq.com', registerTime: Date.now(), level: 9999,};

公式：

type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
type XOR<T, U> = (Without<T, U> & U) | (Without<U, T> & T);

使用：

type XORType = XOR<Type1, Type2>;
// 实现三个类型彼此互斥type XORType2 = XOR<XORType, Type3>;

实现原理：

通过 Exclude ，即差集类型，声明两个类型相对的互斥结构。
通过 never 类型来禁止一个属性存在。


保留联合类型的提示

在开发组件时，一个常见的场景是某个属性既可以有一组预设的值，又可以是任意的同类型值，如：

type Size = 'mini' | 'middle' | 'large';
let size1: Size = 'mini';// 不能将类型“"200px"”分配给类型“Size”。let size2: Size = '200px';

这种时候怎么描述类型就有点矛盾了，我又想提供字面量联合类型的提示，又想支持任意的字符串类型，应该怎么做？如果直接 Size | string，那么 Size 中的联合类型会被合并进 string，导致最后类型描述为 string 类型。

这里有个小 trick，可以这么做：

type PresetSize = 'mini' | 'middle' | 'large';
type Size = PresetSize | (string & {});
let size1: Size = 'mini';let size2: Size = '200px';

公式：

请直接复制这个工具类型：

type SmartLiteral<T extends keyof any> = T | (string & {});

使用：

type SmartLiteral<T extends keyof any> = T | (string & {});
type PresetSize = 'mini' | 'middle' | 'large';type Size = SmartLiteral<PresetSize>;
let size1: Size = 'mini';let size2: Size = '200px';

实现原理 ：

首先， string & {} 这个类型等价于 string 类型，可参考 TypeScript 4.8 版本中 - 交叉类型与联合类型的类型收窄增强中的介绍，而与空对象进行交叉类型，又确保了它在联合类型中不会被视为其它字面量类型的父类型，从而避免了类型合并。

satisfies 关键字

satisfies 关键字引入于 TypeScript 4.9 版本，用于实现「使用类型约束值，但仍然使用值本身推导的类型」的效果。

type Colors = 'red' | 'green' | 'blue';type RGB = [number, number, number];
type Palette = Record<Colors, string | RGB>;
const palette = { red: [255, 0, 0], green: '#00ff00', blue: [0, 0, 255],} satisfies Palette;
// stringpalette.green.startsWith('#'); // √// [number, number, number]palette.red.find(() => true); // √// [number, number, number];palette.blue.entries(); // √

在这个例子中，我们要求变量 palette 的类型满足 Palette 结构，同时没有像类型断言或类型标注的效果一样（标注为 Palette 类型，或断言到 Palette 类型），将变量类型修改为了 Palette 类型，而是继续保留了其原始推导出的字面量类型结构。

关于 satisfies 、类型标注、类型断言与隐式类型推导的差异，请阅读：TypeScript 4.9 beta: satisfies 操作符。

模板字符串类型的排列组合

当你希望获得一组规律固定，可由排列组合得到的联合类型时，可以使用模板字符串类型的插槽组合特性：

type Software = 'WeChat' | 'AliPay' | 'LOLM';type Platform = 'Android' | 'iOS' | 'HarmonyOS';type VersionTag = 'debug' | 'stable' | 'nightly';
type Products = `${Software}-${Platform}-${VersionTag}`

使用重映射快速修改接口

如果你希望在一个已有的接口基础上，通过对其属性名的修改获得一个新的接口，举例来说，当你有一个属性为 name | age | job 的接口类型，你希望能基于其派生出一个属性为 updatedName | updatedAge | updatedJob 的接口类型，这样一来在原接口属性发生变化时，你无需进行手动处理。

对于这种场景，你可以使用模板字符串类型的重映射（re-mapping）特性：

interface User { name: string; age: number; job: string;}
// {// updatedName: string;// updatedAge: number;// updatedJob: string;// }type UpdatedUser = { [K in keyof User as `updated${Capitalize<K>}`]: User[K];};

公式：

type DerivedStruct<Struct extends object> = { [K in keyof Struct as `updated${Capitalize<K & string>}`]: Struct[K];};
type UpdatedUser2 = DerivedStruct<User>;

实现原理：

重映射，索引类型签名中 as 开始的部分，能够在索引类型映射时将其修改为一个新的字符串类型值。
Capitalize 工具类型，随模板字符串类型一同引入的内置工具类型，功能是将此字符串类型的首字母大写。
K & string ，通过交叉类型的结果同时满足其类型成员的定义，确保类型符合 Capitalize 的泛型类型约束。

In Deep:

如果接口中只有一部分属性需要进行处理，应该怎么办？当然可以实现一个 DerivedStructFromProperties ，然后再开放一个参数来确定需要处理的属性，但这样又变成需要手动处理了。更好的方式是拆分你的接口：

interface UserDetail {}interface UserRelation {}interface UserLevel {}
interface User extends UserDetail, UserRelation, UserLevel {}
interface UpdatedUser extends DerivedStruct<UserDetail>, UserRelation, UserLevel {}

其中 UserDetail 即为需要处理的属性集合。

   
  提取类型

某些时候我们可能会遇到这么个情况，某个三方的 npm 包，导出了类型 A，其中引用了类型 B（但没有导出），而现在我们需要的就是类型 B。

这种时候我们自己使用 infer 关键字来从类型 A 提取类型 B，常见的有这么几种：

提取数组类型的元素类型

type ArrayElementType<T extends any[]> = T extends (infer U)[] ? U : never;
type UserList = Array<{ id: number; name: string; age: number;}>;
// {// id: number;// name: string;// age: number;// }type User = ArrayElementType<UserList>;

提取 Promise 的值类型

type QueryUserResponse = Promise<{ id: string; name: string; email: string;}>;
// {// id: string;// name: string;// email: string;// }type User = Awaited<QueryUserResponse>;

Awaited 是 TypeScript 内置的工具类型，可以用于提取一个 Promise resolve 的值类型。

提取入参类型与返回值类型

interface User {}
interface UpdatedUser extends User {}
// 仅导出了函数export function updateUser(input: User): UpdatedUser {}
// Usertype InputUser = Parameters<typeof updateUser>[0];
// UpdatedUsertype OutputUser = ReturnType<typeof updateUser>;

Parameters、ReturnType 都是内置的工具类型，分别用于提取函数的参数类型与返回类型值。

携带泛型的 React 组件

在 List / Waterfall 这一类组件中，常见的设计是由 dataSource 属性接受数据源，再由 renderItem 属性负责遍历 dataSource 生成内部子元素，这也就意味着应该让 dataSource 的类型能够传递到 renderItem 中，如：

import React from 'react';
function foo() { return ( <Scroller dataSource={[5, 9, 9]} // item 为 number 类型 renderItem={(item) => { return <div>{item.toFixed()}</div>; }} /> );}

要实现以上的效果，你可以使用携带泛型的接口结构，声明组件类型：

import React from 'react';
interface ScrollerProps<TData = any> { dataSource: TData[]; renderItem?: (item: TData) => React.ReactElement;}
export interface GenericTypingWrapper { <TInputData = any>(props: ScrollerProps<TInputData>): React.ReactElement;}
const List: GenericTypingWrapper = ({ dataSource }) => { return <></>;};

如果你希望在组件编写时使用 React.FC，那么可以在导出组件时使用类型断言修正类型：

const Scroller: React.FC<ScrollerProps> = ({ dataSource }) => { return <></>;};
export default Scroller as GenericTypingWrapper;

结语

本文总结了在业务代码中实用的多种 TypeScript 技巧，涵盖了使用 never 类型检查 switch case 语句以确保枚举或联合类型分支处理的完整性，用互斥类型替代联合类型来避免类型冲突，保留联合类型提示的方法，satisfies 关键字的运用，模板字符串类型的排列组合特性，利用重映射快速修改接口，提取特定类型的方式，以及在 React 组件中实现携带泛型等内容。每个技巧都配有详细的代码示例和原理讲解，有助于开发者在实际编程中更高效、准确地使用 TypeScript 。

¤ 拓展阅读 ¤

3DXR技术 | 终端技术 | 音视频技术

服务端技术 | 技术质量 | 数据算法

本文分享自微信公众号 - 大淘宝技术（AlibabaMTT）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

原文链接：https://my.oschina.net/u/4662964/blog/14920615

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。