如何在TypeScript中将映射类型与条件类型一起使用？ - 前端面试题

在TypeScript中，映射类型（Mapped Types）和条件类型（Conditional Types）是两种非常强大的类型系统功能，可以用来根据已有的类型创建新的类型。将它们结合使用可以实现高度定制化的类型转换和校验。下面我将通过一个实际例子来展示如何将它们一起使用。

场景描述

假设我们有一个用户信息的对象类型，我们想根据用户的权限级别决定某些属性是否为可选。

定义基础类型

首先，定义一个用户信息的接口 UserInfo：

typescript
interface UserInfo {
  id: number;
  name: string;
  email: string;
  role: string;
}

使用映射类型和条件类型

我们要创建一个新类型，根据用户的 role 属性决定 email 属性是否为可选。在这个例子中，我们假设只有管理员（admin）必须有 email 属性，其他用户则是可选的。

typescript
type ConditionalEmail<T extends UserInfo> = {
  [K in keyof T]: K extends 'email' 
    ? T['role'] extends 'admin' 
      ? string 
      : string | undefined 
    : T[K]
};

解析类型定义

在上面的类型定义中，我们使用了映射类型来重新定义每个属性：

[K in keyof T] 表示遍历 UserInfo 的所有属性。
K extends 'email' 是一个条件类型，用来检查当前的键是否是 email。
如果是 email 键，我们进一步使用条件类型 T['role'] extends 'admin' 检查 role 是否为 admin。
- 如果是 admin，则 email 的类型为 string。
- 如果不是 admin，则 email 的类型为 string | undefined（即可选的）。
对于非 email 的属性，我们直接使用原始类型 T[K]。

使用该类型

typescript
const user1: ConditionalEmail<UserInfo> = {
  id: 1,
  name: 'Alice',
  role: 'admin',
  email: 'alice@example.com'
};

const user2: ConditionalEmail<UserInfo> = {
  id: 2,
  name: 'Bob',
  role: 'user'
  // email 是可选的，因此可以不提供
};

总结

通过上述方式，我们可以根据对象中的某些属性值条件动态地调整其他属性的类型。这种方法在处理具有权限差异的复杂对象时尤其有用。通过映射类型和条件类型的组合使用，TypeScript 提供了强大的类型系统能力，使得代码更加安全和灵活。