TypeScript 类型缩小：类型保护函数与断言

类型缩小是 TypeScript 类型系统中最实用的特性之一。当你使用联合类型时，TypeScript 只能访问所有类型共有的属性和方法。通过类型缩小，你可以告诉编译器："在某个代码块中，这个变量的类型是更具体的类型 A，而非原来的联合类型"。本文将详细介绍两种实现类型缩小的方式：类型保护函数和类型断言。

一、类型缩小的本质

1.1 为什么需要类型缩小

考虑一个简单的场景：处理一个可能是字符串或数组的变量。

function processValue(input: string | string[]) {
    // 编译器不知道 input 是 string 还是 string[]
    // 因此只能调用两者共有的方法
    console.log(input.length); // 错误：不确定 length 的含义
}

上面的代码会报错，因为 input 可能是 string（此时 length 是字符数），也可能是 string[]（此时 length 是元素个数）。TypeScript 无法确定具体类型，所以限制你访问不确定的属性。

类型缩小的目的就是在特定代码块内，将变量的类型从宽泛的联合类型缩小到更具体的类型，从而解锁更多的属性和方法访问权限。

1.2 类型缩小的常见方式

TypeScript 支持多种类型缩小机制：

二、类型保护函数

2.1 什么是类型保护函数

类型保护函数是一个返回布尔值的函数，它的特殊之处在于 TypeScript 能够识别其返回值对类型的影响。当你使用这样的函数进行条件判断时，TypeScript 会自动缩小变量的类型范围。

function isString(value: unknown): boolean {
    return typeof value === 'string';
}

function handleInput(input: string | number) {
    if (isString(input)) {
        // TypeScript 自动将 input 缩小为 string
        console.log(input.toUpperCase()); // 正确
    } else {
        // TypeScript 自动将 input 缩小为 number
        console.log(input.toFixed(2)); // 正确
    }
}

上面的例子中，isString 看似只是一个普通的布尔返回值函数，但 TypeScript 的类型系统能够识别这种模式。当你在 if 条件中调用它时，TypeScript 会分析函数内部的逻辑，并将变量的类型进行相应地缩小。

2.2 使用类型谓词实现精确的类型保护

标准的返回布尔值函数只能提供基本的类型推断，如果你需要更精确地控制类型缩小过程，应该使用类型谓词（Type Predicate）。类型谓词是一种特殊的返回类型写法，它明确告诉 TypeScript："这个函数的返回值不仅是个布尔值，而且当返回 true 时，参数具有特定的类型"。

类型谓词的语法是 参数 is 类型，它必须写在函数签名中，放在返回类型的位置上。

interface Dog {
    bark(): void;
    breed: string;
}

interface Cat {
    meow(): void;
    color: string;
}

type Pet = Dog | Cat;

// 使用类型谓词定义类型保护函数
function isDog(pet: Pet): pet is Dog {
    return (pet as Dog).bark !== undefined;
}

function handlePet(pet: Pet) {
    if (isDog(pet)) {
        // pet 被精确缩小为 Dog 类型
        pet.bark();
        console.log(`Dog breed: ${pet.breed}`);
    } else {
        // pet 被缩小为 Cat 类型
        pet.meow();
        console.log(`Cat color: ${pet.color}`);
    }
}

类型谓词 pet is Dog 的含义是：当这个函数返回 true 时，TypeScript 应该将 pet 的类型视为 Dog。这种写法给予你对类型缩小过程的完全控制权。

2.3 可辨识联合的类型保护

可辨识联合（Discriminated Union）是一种利用共同属性（判别属性）来区分联合类型成员的模式。这是 TypeScript 中最优雅的类型缩小方式之一。

// 定义每种形状的共同类型接口
interface Circle {
    kind: 'circle';
    radius: number;
}

interface Rectangle {
    kind: 'rectangle';
    width: number;
    height: number;
}

interface Triangle {
    kind: 'triangle';
    base: number;
    height: number;
}

type Shape = Circle | Rectangle | Triangle;

function calculateArea(shape: Shape): number {
    switch (shape.kind) {
        case 'circle':
            // shape 被缩小为 Circle
            return Math.PI * shape.radius ** 2;
        case 'rectangle':
            // shape 被缩小为 Rectangle
            return shape.width * shape.height;
        case 'triangle':
            // shape 被缩小为 Triangle
            return (shape.base * shape.height) / 2;
        default:
            // 穷尽性检查：如果漏掉某个类型，default 分支会收到 never 类型
            const _exhaustive: never = shape;
            throw new Error(`Unknown shape: ${_exhaustive}`);
    }
}
```

这种方式的优势在于类型安全性与代码可读性的完美结合。判别属性 `kind` 清晰地表达了类型的区分逻辑，而 TypeScript 会自动在每个分支中进行类型缩小。

### 2.4 复杂的类型保护场景

在实际开发中，你可能会遇到更复杂的类型检查需求。以下是一个综合示例，展示了多种类型保护函数的组合使用：

```typescript
type ApiResponse<T> =
    | { status: 'success'; data: T }
    | { status: 'error'; message: string; code: number }
    | { status: 'loading' };

// 成功的类型保护
function isSuccess<T>(response: ApiResponse<T>): response is ApiResponse<T> & { status: 'success' } {
    return response.status === 'success';
}

// 错误的类型保护
function isError<T>(response: ApiResponse<T>): response is ApiResponse<T> & { status: 'error' } {
    return response.status === 'error';
}

// 加载中的类型保护
function isLoading<T>(response: ApiResponse<T>): response is ApiResponse<T> & { status: 'loading' } {
    return response.status === 'loading';
}

function processResponse<T>(response: ApiResponse<T>) {
    if (isSuccess(response)) {
        console.log('Success:', response.data);
    } else if (isError(response)) {
        console.error(`Error ${response.code}:`, response.message);
    } else {
        console.log('Loading...');
    }
}

三、类型断言

3.1 类型断言的基本概念

类型断言是开发者主动告诉编译器"我知道这个变量的类型是什么，请按照我说的类型来处理"的方式。与类型保护函数不同，类型断言不会进行任何运行时检查——它只是纯粹地改变 TypeScript 对变量类型的理解。

类型断言有两种语法形式。第一种是尖括号语法：

const someValue: unknown = 'Hello World';
const strLength = (someValue as string).length;

第二种是 as 语法，这是更推荐的方式：

const someValue: unknown = 'Hello World';
const strLength = (someValue as string).length;

两种语法完全等价，但 as 语法在 JSX 环境中是唯一可用的形式，而且可读性更好。

3.2 使用类型断言处理 DOM 元素

类型断言最常见的应用场景是处理 DOM 元素。document.getElementById 等方法的返回类型是 HTMLElement | null，如果你确定某个元素一定存在且是特定的 HTML 元素类型，就需要使用类型断言。

const inputElement = document.getElementById('username');

// 未使用断言：TypeScript 认为 inputElement 可能是 null 或更宽泛的 HTMLElement
// inputElement.value; // 错误

// 使用类型断言告诉编译器这是一个具体的 HTML 元素
const input = document.getElementById('username') as HTMLInputElement;
console.log(input.value); // 正确

// 处理可能为 null 的情况
const submitButton = document.getElementById('submit') as HTMLButtonElement | null;
if (submitButton) {
    // 在 if 块内，submitButton 被缩小为 HTMLButtonElement
    submitButton.disabled = true;
}

3.3 非空断言操作符

当你确定某个值绝对存在（非 null 或非 undefined），可以使用非空断言操作符 ! 来快速跳过类型检查。这个操作符告诉编译器"我保证这个值不是 null 或 undefined"。

interface User {
    name: string;
    email?: string;
}

const users = [
    { name: 'Alice' },
    { name: 'Bob', email: 'bob@example.com' }
];

// find 返回可能是 undefined，但这里我们确定数组非空
const firstUser = users[0]; // 安全

// 如果使用 find 且确定结果存在
const userWithEmail = users.find(u => u.email);

// 非空断言：告诉编译器 userWithEmail 一定有值
const email = userWithEmail!.email;

// 等价于传统的类型断言
const email2 = (userWithEmail as { name: string; email: string }).email;

需要特别注意的是，非空断言是一种危险的操作。如果你的假设是错误的，运行时就会抛出错误。建议仅在有充分信心确认值存在的情况下使用。

3.4 类型断言的陷阱

类型断言虽然强大，但使用不当会导致类型安全问题。以下是几个常见的陷阱：

将苹果断言为橙子

interface Apple {
    color: string;
    eat(): void;
}

interface Orange {
    color: string;
    juice(): void;
}

const apple: Apple = { color: 'red', eat: () => {} };
const fakeOrange = apple as Orange; // 类型检查通过，但逻辑错误

// 运行时错误：apple 没有 juice 方法
// fakeOrange.juice();

绕过类型检查

const input: unknown = '123';
// 虽然可以这样断言，但应该优先使用类型转换函数
const num = input as number;
console.log(num * 2); // 如果 input 不是数字，运行时出错

避免断言过度

// 过度断言
function processData(data: unknown) {
    const result = data as string; // 可能丢失原有信息
}

// 更好的方式：保留类型的灵活性
function processData<T>(data: T) {
    // 保持 data 的原始类型
}

四、类型断言与类型保护的选择

4.1 何时使用类型断言

类型断言适用于以下场景：

4.2 何时使用类型保护函数

类型保护函数适用于以下场景：

4.3 最佳实践建议

优先使用类型保护而非断言

当你需要频繁进行某种类型检查时，创建可复用的类型保护函数比每次使用断言更安全、可维护性更好。

// 不推荐：每次都断言
function process(input: string | object) {
    if ((input as string).length !== undefined) {
        console.log((input as string).length);
    }
}

// 推荐：使用类型保护函数
function isStringLike(input: string | object): input is string {
    return typeof input === 'string' || (input as string).length !== undefined;
}

function process(input: string | object) {
    if (isStringLike(input)) {
        console.log(input.length); // 类型自动缩小
    }
}

使用 unknown 作为中间类型

当处理来自外部的未知类型数据时，先用 unknown 接收，再用类型保护或断言转换。

function processExternalData(data: unknown) {
    // 使用类型保护检查
    if (isUserData(data)) {
        handleUser(data);
    } else if (isConfigData(data)) {
        handleConfig(data);
    } else {
        console.error('Unknown data type');
    }
}

五、综合实践：构建类型安全的数据处理管道

让我们通过一个完整的示例，将类型保护和类型断言结合使用，构建一个类型安全的数据处理管道：

// 数据类型定义
interface RawUser {
    id: number;
    name: string;
    email: string;
    role: string;
    metadata?: unknown;
}

interface ProcessedUser {
    id: number;
    displayName: string;
    email: string;
    isAdmin: boolean;
}

// 类型保护函数
function isRawUser(data: unknown): data is RawUser {
    if (!data || typeof data !== 'object') return false;
    const d = data as Record<string, unknown>;
    return (
        typeof d.id === 'number' &&
        typeof d.name === 'string' &&
        typeof d.email === 'string' &&
        typeof d.role === 'string'
    );
}

function isValidEmail(email: string): boolean {
    return email.includes('@') && email.includes('.');
}

// 数据处理函数
function processUser(data: unknown): ProcessedUser | null {
    if (!isRawUser(data)) {
        console.error('Invalid user data');
        return null;
    }

    // data 现在被缩小为 RawUser 类型
    if (!isValidEmail(data.email)) {
        console.error('Invalid email format');
        return null;
    }

    return {
        id: data.id,
        displayName: data.name.toUpperCase(),
        email: data.email.toLowerCase(),
        isAdmin: data.role === 'admin'
    };
}

// 使用示例
const rawData: unknown = JSON.parse('{"id":1,"name":"Alice","email":"ALICE@EXAMPLE.COM","role":"user"}');

const result = processUser(rawData);
if (result) {
    // result 被缩小为 ProcessedUser
    console.log(`User ${result.displayName} is admin: ${result.isAdmin}`);
}

这个示例展示了类型保护和类型断言的最佳实践组合：通过类型保护函数确保运行时数据的类型安全，通过类型推断自动缩小变量类型，最终实现编译时和运行时的双重类型安全。

总结

类型缩小是 TypeScript 类型系统的核心能力。类型保护函数通过返回布尔值或类型谓词，让 TypeScript 自动推断更具体的类型；类型断言则允许开发者主动指定类型。理解这两者的适用场景和使用方式，能够帮助你在保持类型安全的前提下，编写出更加灵活和健壮的 TypeScript 代码。