TypeScript 条件类型工具：Exclude、Extract、NonNullable

在 TypeScript 开发中，处理联合类型是日常工作的核心部分。我们经常需要从现有的类型中“剔除”某些成分，或者只“提取”特定的成分。手动重新定义这些类型不仅繁琐，而且容易导致源类型和目标类型不同步。TypeScript 提供的内置条件类型工具 Exclude、Extract 和 NonNullable 专门用于解决这类问题。

以下指南将详细介绍这三个工具的用法，并通过具体步骤演示如何应用它们来简化类型定义。

一、使用 Exclude 剔除不需要的类型

Exclude<T, U> 的作用是从类型 T 中剔除所有可以赋值给类型 U 的成员。它的核心逻辑是“差集”运算。

1. 理解基本语法

该工具接收两个泛型参数：

• T：原始的联合类型。
• U：想要剔除的类型。

其底层实现逻辑类似于：
$$T \text{ extends } U ? \text{never} : T$$

2. 剔除字符串字面量

假设有一个包含多种状态和事件的联合类型，你想要移除特定的错误状态。

1. 定义一个包含多种状态的联合类型 Status。
2. 使用 Exclude 移除 'Error' 和 'Loading' 状态。
3. 查看生成的类型 ActiveStatus，它仅包含剩余的状态。

type Status = 'Success' | 'Error' | 'Loading' | 'Idle';

// 步骤 2：使用 Exclude 移除特定状态
type ActiveStatus = Exclude<Status, 'Error' | 'Loading'>;

// 结果验证：ActiveStatus 等价于 'Success' | 'Idle'
let s1: ActiveStatus = 'Success'; // 合法
let s2: ActiveStatus = 'Error';   // 报错：类型 '"Error"' 不能赋值给类型 'ActiveStatus'

3. 从类型混合中剔除某一大类

当联合类型混合了原始类型（如 string、number）时，可以用它来按大类筛选。

1. 定义一个混合类型 MixedType。
2. 调用 Exclude<MixedType, string>。
3. 检查结果，确认所有字符串类型已被移除，仅保留数字和布尔值。

type MixedType = string | number | boolean;

type NonStringType = Exclude<MixedType, string>;

// 结果：NonStringType 等价于 number | boolean

二、使用 Extract 提取特定的类型

Extract<T, U> 的作用与 Exclude 相反，它从类型 T 中提取所有可以赋值给类型 U 的成员。它的核心逻辑是“交集”运算。

1. 理解基本语法

该工具同样接收两个泛型参数：

• T：原始的联合类型。
• U：想要提取的目标类型。

其底层实现逻辑类似于：
$$T \text{ extends } U ? T : \text{never}$$

2. 提取特定函数签名

在实际业务中，你可能有一个包含多种事件回调的联合类型，只需要提取处理字符串的函数。

1. 定义一个包含不同函数签名的联合类型 EventHandlers。
2. 使用 Extract 筛选出参数为 string 的函数。
3. 赋值给具体变量以验证类型约束。

type StringHandler = (s: string) => void;
type NumberHandler = (n: number) => void;

type EventHandlers = StringHandler | NumberHandler;

// 步骤 2：提取参数为 string 的函数
type OnlyStringHandler = Extract<EventHandlers, StringHandler>;

// 结果验证
const handler: OnlyStringHandler = (str) => {
    console.log(str.toUpperCase()); // 这里可以安全调用字符串方法
};

3. 提取共有成员

当处理结构复杂的对象联合类型时，可以使用它提取特定属性结构的成员。

1. 定义两个具有公共属性的结构 Person 和 Company。
2. 建立联合类型 Entity。
3. 应用 Extract 找出包含 name: string 属性的所有类型。

interface Person {
    name: string;
    age: number;
}

interface Company {
    name: string;
    employeeCount: number;
}

interface Product {
    id: number;
    price: number;
}

type Entity = Person | Company | Product;

// 提取含有 name 属性的类型（注意：这里简单提取了结构匹配的，实际使用通常直接针对联合类型提取）
type NamedEntity = Extract<Entity, { name: string }>;

// 结果：NamedEntity 等价于 Person | Company

三、使用 NonNullable 处理空值

NonNullable<T> 是一个非常实用的工具，它从类型 T 中剔除 null 和 undefined。这本质上是 Exclude<T, null | undefined> 的简写形式。

1. 处理可能为空的输入

当从 API 或 DOM 获取数据时，类型往往包含 null 或 undefined。为了后续安全操作，通常需要去除它们。

1. 声明一个可能为空的类型 DatabaseValue。
2. 使用 NonNullable 过滤掉空值。
3. 对比处理前后的类型差异。

type DatabaseValue = string | number | null | undefined;

type SafeValue = NonNullable<DatabaseValue>;

// 结果：SafeValue 等价于 string | number

2. 配合类型守卫使用

虽然 TypeScript 有控制流分析，但在某些复杂的类型推断中，显式使用 NonNullable 可以更清晰地表达意图。

1. 编写一个函数，接收可能为空的参数。
2. 在函数内部进行 if 判断。
3. 利用 NonNullable 明确变量在判断块内的类型。

function processValue(value: string | null) {
    if (value !== null) {
        // TypeScript 能够推断出这里的 value 是 string
        // 但如果你需要将这个类型提取出来单独使用：
        type ConfirmedString = NonNullable<typeof value>;

        const str: ConfirmedString = value;
        console.log(str.length);
    }
}

四、实战对比与选择

为了更直观地理解这三个工具的区别，请参考下表。

综合实操步骤

假设你正在维护一个表单处理系统，需要处理多种类型的输入事件，并确保核心处理逻辑不接受空值。

1. 定义原始的输入事件联合类型，包含可能为空的字段。
2. 使用 Extract 筛选出所有与“文本输入”相关的事件类型。
3. 使用 Exclude 从筛选结果中移除“禁用”状态的事件。
4. 使用 NonNullable 确保最终的事件数据对象本身不为空。
5. 编写处理函数并应用最终生成的类型。

// 步骤 1：定义原始类型
type FormData = string | number;
type EventBase = {
    id: number;
    data: FormData;
};

type TextInputEvent = EventBase & { type: 'text' };
type NumberInputEvent = EventBase & { type: 'number' };
type DisabledEvent = EventBase & { type: 'disabled' };
type NullEvent = null;

// 假设这是所有可能事件的联合
type AllEvents = TextInputEvent | NumberInputEvent | DisabledEvent | NullEvent;

// 步骤 2 & 3：筛选文本事件，并移除 DisabledEvent
// 注意：这里先提取 EventBase（排除 Null），再排除 DisabledEvent
type ValidEvents = Exclude<AllEvents, NullEvent | DisabledEvent>;

// 步骤 4：进一步提取只有文本类型的事件
type PureTextEvents = Extract<ValidEvents, { type: 'text' }>;

// 步骤 5：编写处理函数
function handleTextEvent(evt: PureTextEvents) {
    // 此时 evt.data 的类型会被推断为 FormData (string | number)
    // evt.type 是 'text'
    // evt 绝对不会是 null

    console.log(`Processing text ${evt.data}`);
}

通过以上步骤，你可以构建出类型安全且逻辑清晰的数据处理管道。熟练掌握 Exclude、Extract 和 NonNullable，能让你在面对复杂类型定义时，通过组合变换轻松得到目标类型，而不是从头手写每一个类型声明。