第十三章：条件类型与类型守卫-TypeScript 全面进阶指南

当前位置:　首页>> 技术小册>> TypeScript 全面进阶指南

### 第十三章：条件类型与类型守卫

在TypeScript的世界中，类型系统是其最强大的特性之一，它允许开发者在编译时期就捕获到许多潜在的错误，从而提高代码的可维护性和健壮性。随着项目复杂度的增加，对类型的高级操作需求也日益增长。本章将深入探讨TypeScript中的两大高级特性：条件类型和类型守卫，帮助读者全面进阶TypeScript的类型操作技巧。

#### 一、条件类型基础

条件类型（Conditional Types）是TypeScript 2.8版本引入的一个非常强大的特性，它允许开发者根据条件来创建类型。条件类型基于三元运算符的语法，但用于类型而非值。其基本语法如下：

```typescript
type TypeName = Condition extends TrueType ? TrueResult : FalseResult;
```

这里，`Condition` 是被检查的类型，`TrueType` 是与 `Condition` 进行比较的类型，如果 `Condition` 可以被赋值给 `TrueType`（即它们兼容），则结果是 `TrueResult`，否则是 `FalseResult`。

##### 示例：基本的条件类型

假设我们想要根据一个对象是否具有某个属性来定义不同的类型，可以使用条件类型来实现：

```typescript
type HasProperty<T, K extends keyof any> = K extends keyof T ? T[K] : never;

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

type NameType = HasProperty<Person, 'name'>; // string
type OccupationType = HasProperty<Person, 'occupation'>; // never，因为Person没有occupation属性
```

##### 进阶：递归条件类型

条件类型还可以递归地使用，以处理更复杂的数据结构。例如，实现一个类型，该类型能够提取数组中所有元素的类型（如果数组元素类型相同）：

```typescript
type ElementType<T> = T extends (infer U)[] ? U : never;

type StringArrayType = ElementType<string[]>; // string
type MixedArrayType = ElementType<Array<string | number>>; // string | number，但注意这里并没有精确到所有元素类型相同的情况
```

对于精确处理数组元素类型相同的情况，可能需要更复杂的逻辑或使用TypeScript的其他特性如映射类型（Mapped Types）结合条件类型来实现。

#### 二、类型守卫

类型守卫（Type Guards）是TypeScript中一种特殊的表达式，它们允许开发者在运行时检查一个值是否属于某个类型。类型守卫对于联合类型（Union Types）特别有用，因为它们可以帮助TypeScript编译器缩小类型范围，从而允许更精确的类型操作。

##### 1. 用户自定义的类型守卫

用户可以通过`is`前缀的函数或类型谓词（Type Predicates）来定义类型守卫。类型谓词是一种特殊的函数签名，它告诉TypeScript编译器这个函数将如何改变类型推断。

```typescript
function isFish(pet: Fish | Bird): pet is Fish {
    return (pet as Fish).swim !== undefined;
}

interface Fish {
    swim(): void;
}

interface Bird {
    fly(): void;
}

let pet: Fish | Bird = getPet(); // 假设getPet函数返回Fish或Bird类型
if (isFish(pet)) {
    pet.swim(); // 这里pet被推断为Fish类型
} else {
    pet.fly(); // 这里pet被推断为Bird类型
}
```

##### 2. 类型守卫的类型推断

在类型守卫中，TypeScript通过函数签名中的`pet is Fish`这样的类型谓词来推断类型。如果类型守卫函数返回`true`，则TypeScript会将变量的类型推断为`Fish`；如果返回`false`，则保持原有的联合类型或进一步根据其他条件进行推断。

##### 3. `typeof` 和 `instanceof` 类型守卫

除了自定义类型守卫，TypeScript还内置了两种类型守卫：`typeof` 和 `instanceof`。

- **`typeof` 类型守卫**：用于判断基本数据类型（如`string`、`number`、`boolean`、`symbol`、`undefined`、`null`、`bigint`）以及`function`和`object`。

```typescript
function isString(x: any): x is string {
    return typeof x === 'string';
}
```

- **`instanceof` 类型守卫**：用于判断一个实例是否属于某个构造函数或类。

```typescript
function isDog(a: any): a is Dog {
    return a instanceof Dog;
}

class Dog {
    bark() {
        console.log('Woof!');
    }
}

let d: Dog | Cat = getAnimal(); // 假设getAnimal可能返回Dog或Cat
if (isDog(d)) {
    d.bark(); // 这里d被推断为Dog类型
}
```

#### 三、结合使用条件类型与类型守卫

条件类型和类型守卫往往是相辅相成的。条件类型可以在编译时根据类型条件来构建复杂的类型系统，而类型守卫则允许在运行时根据值的实际类型来缩小类型范围。

##### 示例：泛型类型守卫与条件类型结合

假设我们有一个函数，它接受一个对象数组，并返回数组中所有满足特定条件的元素的类型集合。我们可以使用泛型、条件类型以及类型守卫来实现这一功能：

```typescript
function filterByType<T, K extends keyof T>(
    arr: T[],
    key: K,
    value: T[K]
): Array<{ [P in K]: T[K] } & Omit<T, K>> where T[K] extends any {
    return arr.filter(item => item[key] === value) as any;
    // 注意：这里的类型断言(as any)是为了简化示例，实际中可能需要更精确的类型处理
}

interface User {
    id: number;
    name: string;
    role: 'admin' | 'user';
}

const users: User[] = [
    { id: 1, name: 'Alice', role: 'admin' },
    { id: 2, name: 'Bob', role: 'user' }
];

// 假设我们想要获取所有管理员用户的名称和ID
const admins = filterByType(users, 'role', 'admin').map(user => ({ id: user.id, name: user.name }));
// 这里admins的类型将自动推断为Array<{ id: number, name: string }>
```

注意，上述`filterByType`函数的类型定义使用了泛型、条件类型（通过`Omit<T, K>`来排除`K`键），并且理论上应该使用更精确的类型推断而不是`as any`。然而，由于TypeScript的类型系统限制，完全自动推断可能需要更复杂的类型逻辑或使用TypeScript的未来特性。

#### 结论

条件类型和类型守卫是TypeScript中两个非常强大的特性，它们分别在编译时和运行时为开发者提供了精细控制类型的能力。通过深入理解这两个特性，开发者可以编写出更加健壮、易于维护的TypeScript代码。在实际开发中，建议结合使用条件类型和类型守卫，以充分利用TypeScript类型系统的优势，提高代码质量和开发效率。

该分类下的相关小册推荐：

剑指TypeScript

TypeScript开发实战

TypeScript入门指南