高级类型：联合类型和类型别名

欢迎继续本专栏的第十九篇文章。在前几期中，我们已逐步构建了对 TypeScript 泛型的全面认识，包括泛型函数和泛型接口的基础、泛型类的应用、多类型参数的处理，以及泛型在数据结构中的实践。这些工具让我们能够创建高度可复用的代码组件，同时保持类型系统的严谨性。今天，我们将转向高级类型的领域，重点探讨联合类型（union types）和类型别名（type aliases）。联合类型通过 | 操作符允许值属于多个类型之一，提供灵活的类型表达；类型别名则通过 type 关键字为复杂类型赋予简洁名称，便于管理和复用。我们还将考察它们在条件逻辑中的结合方式，如何通过类型守卫和缩小机制处理不确定性。内容将从联合类型的基本用法入手，逐步引入类型别名的定义，并探讨二者在条件逻辑中的协同应用。通过层层展开的解释、丰富示例和实际场景分析，我们旨在帮助您从简单联合过渡到复杂类型模型，并在项目中运用这些高级类型来提升代码的表达力和安全性。内容将由浅入深推进，确保您能获得全面而深刻的洞见。

理解高级类型在 TypeScript 中的定位

TypeScript 的类型系统不止于基本类型和对象形状，它通过高级类型机制允许开发者构建更动态和精确的模型。联合类型和类型别名是其中基础却强大的组成部分：联合类型（用 | 表示）定义一个值可能属于几个类型之一，处理"或"的逻辑；类型别名（用 type 定义）则为任何类型起别名，简化复杂表达，并支持参数化。

这些高级类型的起源与 TypeScript 的类型理论基础相关，联合类型借鉴了联合类型系统，类型别名则类似于其他语言的 typedef。在 TypeScript 中，它们定位于处理不确定性和代码抽象：联合类型适合模型变体，如函数返回 string | number；类型别名则组织类型，如 type ID = string | number，用于一致引用。它们在条件逻辑中的结合尤为重要，通过 typeof 或 instanceof 等守卫，联合类型能被"缩小"到具体分支，提升运行时安全。

为什么从这些高级类型开始？在实际开发中，数据往往不是单一类型：API 响应可能成功或失败，配置可能有多种形式。联合类型提供灵活建模，类型别名避免重复。根据 TypeScript 官方手册，使用这些类型的项目，可读性和错误检测率可提升 20%以上，尤其在大型代码库中。它们与先前学过的泛型和接口紧密整合：联合类型可泛型化，类型别名可定义泛型别名。我们将从联合类型的基本语法开始，逐步引入类型别名，并探讨条件逻辑的结合，确保您能理解如何避免类型爆炸，同时发挥高级类型的潜力。

联合类型和类型别名在 TypeScript 中的定位不仅是语法工具，更是类型设计的艺术：它们鼓励表达不确定性，优先抽象而非冗长具体。这在现代应用中，帮助管理变异数据，并在框架如 React 的 props 类型中发挥关键作用。

联合类型的基本用法：处理"或"的逻辑

联合类型通过 | 操作符连接多个类型，定义一个值可能属于其中之一。这允许类型系统捕捉更多可能性，而不需 any 的宽松。

联合类型的基本定义与简单示例

基础联合：

typescript 复制代码

let id: string | number = "user123";  // 有效
id = 456;  // 有效
// id = true;  // 错误：boolean 非 string | number

这里，id 可为 string 或 number，赋值时编译器检查。

函数参数联合：

typescript 复制代码

function printId(id: string | number): void {
  console.log(`ID: ${id}`);
}

printId("abc");  // 有效
printId(123);    // 有效
// printId([]);   // 错误

基本语法让联合易用：| 分隔类型，值必须匹配至少一个。

数组联合：

typescript 复制代码

const mixed: (string | number)[] = ["apple", 42, "banana"];
// mixed.push(true);  // 错误

联合类型的深入机制

联合类型操作：对联合类型的值，只能访问所有成员共有的成员。

typescript 复制代码

function getLength(value: string | number): number {
  // return value.length;  // 错误：number 无 length
  return value.toString().length;  // 有效，共有的 toString
}

这强制安全访问。

与 null/undefined 结合：

typescript 复制代码

let optional: string | null = "text";
optional = null;  // 有效

function handleOptional(value: string | null): string {
  return value ?? "default";  // 处理 null
}

深入机制：联合类型支持分发（distributive），在条件类型中展开（后文高级类型）。

类型缩小：通过条件逻辑，联合被缩小到具体类型（后述条件逻辑）。

深入联合机制让类型系统处理分支逻辑，在 API 返回或用户输入中常见。

应用：联合类型在状态模型，如 type Status = "loading" | "success" | "error"。

风险：过多联合导致代码分支多。实践：结合守卫管理。

类型别名的定义：简化复杂类型

类型别名用 type 关键字为类型起名，让复杂类型更易管理和复用。它不创建新类型，仅别名。

类型别名的基本语法与简单示例

基础别名：

typescript 复制代码

type ID = string | number;

let userId: ID = "u1";  // 有效
userId = 1;             // 有效

这里，ID 是 string | number 的别名。

函数类型别名：

typescript 复制代码

type Callback = (error: Error | null, result: string) => void;

function asyncOperation(cb: Callback): void {
  // 模拟
  cb(null, "done");
}

基本语法让别名易定义：type Name = Type;。

对象别名：

typescript 复制代码

type Point = {
  x: number;
  y: number;
};

const origin: Point = { x: 0, y: 0 };

类型别名的深入应用

泛型别名：

typescript 复制代码

type Container<T> = { value: T };

const numContainer: Container<number> = { value: 42 };

这参数化别名。

联合别名：

typescript 复制代码

type Result<T> = { success: true; data: T } | { success: false; error: string };

function fetchData(): Result<string> {
  // 逻辑
  return { success: true, data: "data" };
}

深入：类型别名支持递归（有限）。

typescript 复制代码

type TreeNode<T> = {
  value: T;
  children?: TreeNode<T>[];
};

const tree: TreeNode<number> = {
  value: 1,
  children: [{ value: 2 }, { value: 3 }]
};

应用：类型别名在配置或响应模型中，简化长类型。

与接口比较：type 支持联合/交叉，接口支持扩展。实践：简单/联合用 type，对象形状用 interface。

深入应用让类型别名组织代码，在大型项目中减少重复。

风险：别名嵌套深难读。实践：命名清晰，如 UserId 而非 IdType。

在条件逻辑中的结合：联合与别名的协同

联合类型常与条件逻辑结合，通过守卫缩小类型范围。类型别名可封装这些联合，提升可读性。

条件逻辑的基本结合

基本守卫缩小联合：

typescript 复制代码

function process(value: string | number): void {
  if (typeof value === "string") {
    console.log(value.toUpperCase());  // value 缩小为 string
  } else {
    console.log(value.toFixed(2));  // value 缩小为 number
  }
}

typeof 守卫区分联合。

instanceof 守卫：

typescript 复制代码

class ErrorResponse {
  message: string = "";
}

function handleResponse(res: string | ErrorResponse): void {
  if (res instanceof ErrorResponse) {
    console.log(res.message);  // res 是 ErrorResponse
  } else {
    console.log(res);  // res 是 string
  }
}

基本结合让联合实用：逻辑分支缩小类型，避免 any。

条件逻辑的深入结合

自定义守卫：

typescript 复制代码

function isString(value: unknown): value is string {
  return typeof value === "string";
}

type Mixed = string | number | boolean;

function handleMixed(value: Mixed): void {
  if (isString(value)) {
    console.log(value.toUpperCase());  // string
  } else if (typeof value === "number") {
    console.log(value.toFixed());  // number
  } else {
    console.log(value ? "true" : "false");  // boolean
  }
}

value is string 谓词缩小类型。

别名封装联合逻辑：

typescript 复制代码

type Status = "loading" | "success" | "error";

type Response = {
  status: Status;
  data?: string;
  error?: string;
};

function renderResponse(res: Response): string {
  switch (res.status) {
    case "loading":
      return "Loading...";
    case "success":
      return res.data ?? "No data";
    case "error":
      return res.error ?? "Unknown error";
    default:
      const exhaustive: never = res.status;  // 穷尽检查
      return "Invalid status";
  }
}

别名 Status 联合字面，switch 缩小访问 data/error。

深入结合：in 守卫检查属性。

typescript 复制代码

type A = { a: number };
type B = { b: string };
type Union = A | B;

function handleUnion(obj: Union): void {
  if ("a" in obj) {
    console.log(obj.a);  // obj 是 A
  } else {
    console.log(obj.b);  // obj 是 B
  }
}

应用：条件逻辑在 Redux reducer 或 API 处理中，联合别名 + 守卫管理状态变体。

深入让联合与别名协同，提升代码 robustness。

风险：守卫遗漏导致未缩小。实践：用 never 穷尽。

构建复杂类型模型：联合、别名与条件的整合

整合创建高级模型。

基本整合示例

别名联合模型变体：

typescript 复制代码

type Action = 
  { type: "add"; payload: number } |
  { type: "remove"; payload: string };

function reducer(state: any, action: Action): any {
  switch (action.type) {
    case "add":
      return state + action.payload;  // payload number
    case "remove":
      return state - action.payload.length;  // payload string
  }
}

switch 缩小 payload。

深入整合应用

递归别名与联合：

typescript 复制代码

type Json = string | number | boolean | null | Json[] | { [key: string]: Json };

function parseJson(value: string): Json | undefined {
  try {
    return JSON.parse(value);
  } catch {
    return undefined;
  }
}

function isArray(value: Json): value is Json[] {
  return Array.isArray(value);
}

function processJson(data: Json): void {
  if (isArray(data)) {
    data.forEach(item => processJson(item));  // 递归
  } else if (typeof data === "object" && data !== null) {
    Object.values(data).forEach(item => processJson(item));
  } else {
    console.log(data);  // 原始
  }
}

深入整合：Json 别名联合递归定义，守卫处理分支。

应用：复杂模型在配置解析或树结构，联合 + 别名 + 条件确保安全遍历。

整合提升类型表达，在库如 zod schema 中常见。

实际应用：高级类型在项目中的实践

应用1：API 响应，联合别名处理成功/失败。

typescript 复制代码

type ApiResult<T> = { ok: true; data: T } | { ok: false; message: string };

async function fetchUser(): Promise<ApiResult<User>> {
  // 逻辑
  return { ok: true, data: { name: "Alice" } };
}

const result = await fetchUser();
if (result.ok) {
  console.log(result.data.name);  // data 是 User
} else {
  console.log(result.message);  // message 是 string
}

应用2：配置，类型别名联合选项。

案例：GraphQL resolver，用联合别名模型 union 类型，守卫处理查询。

在企业，高级类型减少 casting 30%。

高级主题：条件类型与 infer 整合

条件类型：

typescript 复制代码

type IsString<T> = T extends string ? true : false;

type Test1 = IsString<string>;  // true
type Test2 = IsString<number>;  // false

infer 推断：

typescript 复制代码

type ReturnType<F> = F extends (...args: any) => infer R ? R : never;

type Func = () => string;
type Ret = ReturnType<Func>;  // string

高级与联合/别名结合构建工具类型，如 Flatten 处理嵌套联合。

高级扩展类型能力。

风险与最佳实践

风险：

联合过多分支复杂。
别名循环难调试。
条件遗漏未缩小。

实践：

小联合，从字面开始。
别名分层命名。
总是守卫缩小。
测试边缘。

确保高级类型有效。

结语：高级类型，联合与别名的和谐

通过本篇文章的详尽探讨，您已深入高级类型的各个方面，从联合用法到类型别名，再到条件逻辑结合。这些工具将助您构建精确模型。实践：定义联合别名处理 API。下一期条件类型与 infer，敬请期待。若疑问，欢迎交流。我们继续。