Typescript高级: 深入理解Omit类型和Pick类型

概述

• Omit 是一个非常实用的工具类型，它的功能是从一个已知的对象类型中排除某些属性，并返回一个新的对象类型
• 这在处理复杂对象结构、实现更严格的类型限制时非常有用
• Pick 的工作原理基于 TypeScript 的映射类型
• 当我们使用 Pick<T, K> 时，TypeScript 会遍历 K 中的每一个属性
• 并在新的类型中创建一个同名的属性
• 其类型与原始类型 T 中的对应属性相同

Omit 用法

1 ）基本语法

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

• Omit 并没有内置在标准库中，但我们可以很容易地定义它，如上
• 这里我们使用了另外两个工具类型：Pick 和 Exclude
• Pick 用于从一个对象类型中选择某些属性
• 而 Exclude 则用于从一个类型中排除某些属性

2 ）使用示例

type UserInfo = {  
  id: number;  
  name: string;  
  email: string;  
  password: string;  
};

type UserInfoWithoutPassword = Omit<UserInfo, 'password'>;  

// 相当于：  
// type UserInfoWithoutPassword = {  
//   id: number;  
//   name: string;  
//   email: string;  
// };

• 这里，我们想创建一个不包含密码的用户信息类型，我们可以使用 Omit

Omit 工作原理

• Omit 的工作原理基于 TypeScript 的类型操作和映射类型（Mapped Types）
• 当我们使用 Omit<T, K> 时，TypeScript 会执行以下步骤：
  • 解析 keyof T：获取类型 T 的所有属性键的联合类型
  • 使用 Exclude<keyof T, K>：从 keyof T 中排除 K 指定的属性键
  • 使用 Pick<T, ...>：基于排除后的属性键集合，从 T 中选择对应的属性，并生成一个新的类型

高级用法

• 除了基本的用法之外，Omit 还可以与其他工具类型结合使用，以实现更复杂的类型操作

• 例如，我们可以使用 Omit 与 Partial 结合，来创建一个类型，其中的某些属性是可选的，而其他属性则是必需的

  type PartialUserInfo = Partial<Omit<UserInfo, 'id'>>;
  // 相当于：
  // type PartialUserInfo = {
  //   name?: string;
  //   email?: string;
  //   password?: string;
  // };
  

• 在上面这个例子中，除了 id 属性之外的所有属性都变成了可选的

Pick 概述

• 在 TypeScript 的类型系统中，工具类型（Utility Types）为我们提供了一系列预定义的、可重用的类型转换机制
• 其中，Pick 是这些工具类型中非常实用且基础的一个，它允许我们从现有的类型中选择出一部分属性来创建一个新的类型
• Pick 工具类型接受两个类型参数：第一个参数 T 是我们要从中选择属性的原始类型，第二个参数 K 是 T 类型中属性的子集，这些属性将被包含在生成的新类型中

Pick 基本语法

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

• 这里使用了 TypeScript 的映射类型（Mapped Types）语法
• [P in K]: T[P]; 表示对于 K 中的每一个属性 P，都将其复制到新类型中
• 并且其类型与原始类型 T 中的对应属性相同

使用示例

• 假设我们有一个 Person 类型，它包含了多个属性：

  type Person = {
      name: string;
      age: number;
      address: string;
      phoneNumber: string;
  };
  
  type PersonDetails = Pick<Person, 'name' | 'age'>;
  
  // 相当于：  
  // type PersonDetails = {  
  //     name: string;  
  //     age: number;  
  // };
  

Pick 工作原理

• Pick 的工作原理基于 TypeScript 的映射类型
• 当我们使用 Pick<T, K> 时，TypeScript 会遍历 K 中的每一个属性
• 并在新的类型中创建一个同名的属性, 其类型与原始类型 T 中的对应属性相同

Pick 高级用法

• 除了基本的用法之外，Pick 还可以与其他工具类型结合使用
• 以实现更复杂的类型操作

1 ） 与 Omit 结合使用

• 我们可以先使用 Pick 选择出需要的属性
• 然后再使用 Omit 排除掉不需要的属性
• 虽然直接使用 Pick 就可以达到目的
• 但有时候这样的组合能更清晰地表达我们的意图

type PersonWithoutAddress = Omit<Person, 'address'>;  
// 或者使用 Pick 和 Exclude 来达到相同的效果  
type PersonWithoutAddressAlternative = Pick<Person, Exclude<keyof Person, 'address'>>;

2 ) 与条件类型结合使用

type IncludePhoneNumber<T extends Person, Include extends boolean> =   
    Include extends true ? Pick<T, 'phoneNumber' | keyof Omit<T, 'phoneNumber'>> : Omit<T, 'phoneNumber'>;  
  
// 使用示例  
type PersonWithPhone = IncludePhoneNumber<Person, true>; // 包含 phoneNumber  
type PersonWithoutPhone = IncludePhoneNumber<Person, false>; // 不包含 phoneNumber

• 还可以将 Pick 与条件类型（Conditional Types）结合使用

• 根据某些条件来动态地选择属性

• 在这个例子中，我们定义了一个泛型工具类型 IncludePhoneNumber

• 它接受一个 Person 类型的扩展和一个布尔值 Include

• 根据 Include 的值，我们使用 Pick 或 Omit 来决定是否包含 phoneNumber 属性

• 总结

  • Pick 是 TypeScript 中一个非常基础和实用的工具类型
  • 它允许我们轻松地从现有的类型中选择出部分属性来创建新的类型
  • 通过深入了解其背后的原理和使用方法
  • 我们可以更加灵活地处理复杂的类型结构
  • 提高代码的可读性和可维护性
  • 在实际开发中，我们可以结合其他工具类型
  • 如 Omit、条件类型等，来实现更复杂的类型操作