Featured image of post 在 TypeScript 5 系列中练习的类型安全编码技术Featured image of post 在 TypeScript 5 系列中练习的类型安全编码技术

在 TypeScript 5 系列中练习的类型安全编码技术

TypeScript 5.x时代所需的类型设计哲学

TypeScript 5 系列引入了许多新功能,可以在不影响开发人员体验的情况下最大限度地提高类型推断的准确性。依赖过多类型断言 (as) 的代码是运行时错误的滋生地。有了型系统在您身边,我们将解释实用技术,自然地缩小您的型。


1. const 类型参数:更智能的文字类型推断

以前,如果您想在函数参数中保留文字类型,则必须在调用方添加“as const”。 TypeScript 5.0 的 const 类型参数允许您在函数定义端强制进行文字推理。

// 呼び出し側の as const なしで厳密なリテラル配列として推論
function createRoutes<const T extends readonly string[]>(routes: T): T {
  return routes;
}
const routes = createRoutes(['/home', '/dashboard']);

作为参数传递的数组和对象不会被扩展,并被安全地推断为精确的元组或文字。

2. satisfies 运算符:类型兼容性验证和推理的兼容性

satisfies 解决了添加类型注释会导致属性的具体类型信息丢失,而删除它会导致验证失败的困境。

type Palette = Record<string, string | number[]>;
const theme = {
  primary: '#0066cc',
  rgb: [0, 102, 204],
} satisfies Palette;

// 型制約を満たしつつ、個別プロパティの型が完全保持される
theme.primary.toUpperCase(); // string型メソッドが安全に呼出可能

3. 具有模板文字类型的事件中心

type Event = 'click' | 'focus';
type HandlerMap = { [K in `on${Capitalize<Event>}`]?: () => void };

在类型级别强制执行字符串连接规则,并在构建时防止事件名称 100% 出现拼写错误。


反模式:应在该领域根除的“任何”

使用“as any”作为解决类型错误的快速方法是放弃 TypeScript 优势的糟糕方法。使用类型保护函数(“is”运算符)和模式验证器(例如 Zod)在运行时边界安全地缩小类型范围。