TypeScript 类型系统实战:泛型、类型守卫与工具类型

一、为什么用 TypeScript

TS 是 JS 的超集,核心卖点是编译期类型检查:在写代码时就拦住”传错类型””字段拼错”这类 JS 运行时才暴露的低级错误,大型项目收益尤其明显。

二、类型系统基础

interface User {
  id: number;
  name: string;
  email?: string;        // 可选
  readonly role: string; // 只读
}

type ID = number | string;  // 联合类型

function getUserId(u: User): ID {
  return u.id;
}

三、泛型与类型守卫

function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

function isString(v: unknown): v is string {
  return typeof v === "string";
}
if (isString(x)) {
  console.log(x.toUpperCase());  // 此处 x 被收窄为 string
}

四、实用工具类型

工具类型 作用
Partial<T> 所有属性变可选
Required<T> 所有属性变必填
Pick<T, K> 只取部分属性
Omit<T, K> 排除部分属性
Record<K, V> 构造键值映射类型

五、常见误区

  • TS 只检查编译期,运行时不保证类型(会被擦除);
  • any 是逃生舱,滥用等于退回 JS,能用 unknown 替代;
  • 类型定义要贴近运行时真实形状,别为了编译过而乱断言。

TS 的价值不在”写类型”本身,而在用类型把业务的约束显式化,让编译器替你盯住边界。