TypeScript 实战进阶：11 个高频高级技巧详解

利用 keyof 实现强类型取值函数

keyof 类似于 JavaScript 的 Object.keys，但它是针对类型（interface/type）的键集合进行操作，返回联合类型。在处理对象属性时，结合泛型与 keyof 可以确保取值函数的类型安全。

假设需要实现一个通用的取值函数，若直接传入普通对象和字符串，将失去类型校验，无法推断返回值类型，且无法防止 Key 的拼写错误。使用 keyof 加强约束：

function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {
  return o[name]
}

此处，K 被限制为 T 的键之一，返回值类型为 T[K]，既约束了输入 Key 的有效性，也精准推断了指向属性的类型。

内置映射类型：Partial、Required 与 Pick

TypeScript 提供了一组常用的内置映射类型，基于 keyof 扩展而来，常用于修改接口或创建新类型：

• Partial<T>：将类型 T 的所有属性设为可选。
• Required<T>：将类型 T 的所有属性设为必填（去除可选标记）。
• Pick<T, K>：从类型 T 中选择指定的一组键 K 组成新类型。

interface User {
  id: number;
  age: number;
  name: string;
}

type PartialUser = Partial<User>
// 结果: { id?: number; age?: number; name?: string; }

type PickUser = Pick<User, "id" | "age">
// 结果: { id: number; age: number; }

条件类型判断 extends

条件类型类似于三元运算符，用于根据类型关系推导出新类型：

T extends U ? X : Y

例如，定义一个测试类型是否为 true 的工具：

type isTrue<T> = T extends true ? true : false
// isTrue<number> 结果为 false

never 类型与 Exclude、Omit 的实现

never 表示永不存在的值的类型，通常出现在无法到达的代码路径或错误类型中。结合条件类型可推导出强大的剔除工具：

• Exclude<T, U>：从 T 中排除可赋值给 U 的类型。如果 T extends U 为真则返回 never，否则保留 T。
• Omit<T, K>：选取除指定键 K 之外的所有属性。本质上是 Pick<T, Exclude<keyof T, K>>。

// 从 'x' | 'a' 中排除 'x' | 'y' | 'z'
// 结果为 'a'
type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'>

interface User { id: number; age: number; name: string }
type OmitUser = Omit<User, "id">
// 结果: { age: number; name: string }

typeof 提取变量类型

typeof 运算符在类型上下文中用于获取变量或表达式的类型。这在需要将现有对象实例的结构作为新接口的基类时非常有用，例如在 Koa 等框架的全局 Context 中注入工具：

import logger from './logger'
import utils from './utils'

interface Context {
  logger: typeof logger,
  utils: typeof utils
}

app.use((ctx: Context) => {
  ctx.logger.info('hello') // 自动获得 logger 暴露的方法提示
})

这种方式确保了全局上下文中的方法签名与实际导入的模块保持严格一致。

类型谓词 is 实现类型守卫

在处理通用 Error 对象时，编译器往往不知道其拥有特定属性（如 AxiosError 的 code）。虽然可以使用 as 强制断言，但更安全、优雅的方式是使用 is 关键字定义类型守卫函数：

function isAxiosError (error: any): error is AxiosError {
  return error.isAxiosError
}

if (isAxiosError(err)) {
  code = `Axios-${err.code}` // 此处 ts 已确认 err 为 AxiosError
}

这种模式广泛应用于 GraphQL 源码中用于区分不同的 Type 对象（ObjectType, ScalarType 等），比强制类型转换更具语义化和安全性。

interface 与 type 的选择

两者大多情况下可互换，主要区别在于：interface 支持声明合并（Declaration Merging），即同名接口会自动合并属性，适合公共库或框架扩展；而 type 更灵活，支持联合类型、元组及复杂的映射类型，但不支持合并。

interface A { a: number }
interface A { b: number } // 合并后 A 拥有 a 和 b

type B = { a: number } & { b: number } // type 需使用交叉类型

Record、Dictionary 与索引签名

在处理字典结构数据时，这些类型非常实用：

type Record<K extends keyof any, T> = { [P in K]: T }
// Record<string, number> 定义一个值为 number 的字符串键对象

此外，Lodash 风格的字典定义也常被采用：

interface Dictionary<T> {
  [index: string]: T;
}

使用 const enum 定义常量表

相比于对象字面量维护常量，const enum 提供了更严格的类型检查，且在编译时会被内联消除，不会生成额外的运行时对象代码：

const enum TODO_STATUS {
  TODO = 'TODO',
  DONE = 'DONE'
}

// 参数必须为枚举值，防止传入非法字符串
function todos(status: TODO_STATUS): void {}
todos(TODO_STATUS.TODO)

VS Code 版本冲突处理

项目中使用 tsc 编译与 IDE 内部使用的 TypeScript 版本不一致时，常出现报错差异。可通过以下方式统一：

1. 点击编辑器右下角的 Typescript 版本号，选择 Select TypeScript Version... 并勾选 Use Workspace Version。

2. 或在 .vscode/settings.json 中配置路径：

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

查阅 TypeScript Roadmap

TypeScript 持续迭代，了解官方的 Roadmap 有助于提前掌握即将发布的特性与 Bug 修复计划，从而更好地规划技术选型。

以上就是 TypeScript 常见高级技巧的详细内容，更多关于 TypeScript 进阶学习与实践的资料请关注本站其它相关文章！