Cabin in the Woods
TypeScript 编程技巧

TypeScript 类型体操：从入门到放弃再到精通

深入理解 TypeScript 高级类型，掌握条件类型、映射类型和模板字面量类型。

· 1 分钟阅读

前言

TypeScript 的类型系统是图灵完备的，这意味着你可以用它来”编程”。本文从几个实际场景出发， 介绍常用的高级类型技巧。

条件类型

type IsArray<T> = T extends any[] ? true : false;

type A = IsArray<string[]>; // true
type B = IsArray<string>;   // false

结合 infer 可以提取类型中的元素：

type UnpackArray<T> = T extends (infer Item)[] ? Item : T;

type C = UnpackArray<string[]>; // string
type D = UnpackArray<number>;   // number

映射类型

type Readonly<T> = {
  readonly [K in keyof T]: T[K];
};

type Optional<T> = {
  [K in keyof T]?: T[K];
};

模板字面量类型

type EventName<T extends string> = `on${Capitalize<T>}`;

type ClickEvent = EventName<'click'>; // 'onClick'
type ChangeEvent = EventName<'change'>; // 'onChange'

实用工具类型

TypeScript 内置了很多有用的工具类型：

  • Partial<T> — 所有属性可选
  • Required<T> — 所有属性必填
  • Pick<T, K> — 从 T 中选取属性 K
  • Omit<T, K> — 从 T 中排除属性 K
  • ReturnType<F> — 获取函数返回值类型
  • Parameters<F> — 获取函数参数类型

掌握这些工具类型，可以大大减少重复的类型定义。

← 返回博客