TypeScript中的数据选择艺术：pick和omit操作入门

最新推荐文章于 2024-06-02 16:51:04 发布

逐星ing

最新推荐文章于 2024-06-02 16:51:04 发布

阅读量724

点赞数 8

分类专栏： TypeScript 前端文章标签： typescript node.js

本文链接：https://blog.csdn.net/qq_41791705/article/details/138564345

版权

前端同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

TypeScript

34 篇文章 0 订阅

订阅专栏

引言

标题：TypeScript中的数据选择艺术：pick和omit操作入门
简短介绍：探索TypeScript中的实用工具类型Pick和Omit，它们可以帮助你从现有类型中选择或排除属性，简化你的代码并提高类型安全性。

背景知识

易于理解的解释：在JavaScript和TypeScript中，经常需要从对象中提取或忽略某些属性。Pick和Omit是TypeScript提供的工具类型，用于实现这一目的。

核心概念

Pick：从现有类型中挑选出特定的属性，创建一个只包含这些属性的新类型。
Omit：从现有类型中排除指定的属性，创建一个不包含这些属性的新类型。

简单示例

Pick 示例：

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

type PersonName = Pick<Person, 'name'>; // 创建一个只包含name属性的类型

const getNames = (person: PersonName) => {
  return person.name;
};

Omit 示例：

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

type PersonWithoutAge = Omit<Person, 'age'>; // 创建一个不包含age属性的类型

const getPersonDetails = ({ name, email }: PersonWithoutAge) => {
  return `${name}, ${email}`;
};

深入理解

工作原理：Pick和Omit通过泛型接受两个参数：一个类型和一个属性键的联合，然后分别返回包含或排除这些属性键的新类型。

实际应用

案例研究：在一个用户信息管理系统中，使用Pick来创建一个只包含必要信息的类型，以及使用Omit来创建一个不含敏感信息的类型。

实际用例：用户信息处理

1. 基础的`Pick`和`Omit`使用

场景：假设我们有一个用户信息对象，我们只想要提取出用户的姓名和邮箱。

使用Pick：

interface User {
  name: string;
  age: number;
  email: string;
}

// 使用Pick来创建一个只包含name和email的类型
type UserBasicInfo = Pick<User, 'name' | 'email'>;

const printUserBasicInfo = ({ name, email }: UserBasicInfo): void => {
  console.log(`Name: ${name}, Email: ${email}`);
};

const user: User = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com"
};

printUserBasicInfo(user); // 正确调用，因为user包含所需的name和email属性

使用Omit：

// 使用Omit来创建一个排除age属性的用户信息类型
type UserWithoutAge = Omit<User, 'age'>;

const printUserWithoutAge = ({ name, email }: UserWithoutAge) => {
  console.log(`Name: ${name}, Email: ${email}`);
};

printUserWithoutAge(user); // 正确调用，因为已经排除了age属性

2. 条件渲染中的`Pick`和`Omit`

场景：在一个用户界面中，根据用户的角色，我们可能需要渲染不同的信息。

使用Pick：

interface User {
  name: string;
  age: number;
  email: string;
  role: string;
}

// 管理员需要查看所有信息
type AdminUserDetails = Pick<User, 'name' | 'age' | 'email'>;

// 普通用户只能查看名字和邮箱
type RegularUserDetails = Pick<User, 'name' | 'email'>;

const renderUserDetails = (user: User, isUserAdmin: boolean) => {
  if (isUserAdmin) {
    // 管理员可以查看所有信息
    const adminDetails: AdminUserDetails = {
      name: user.name,
      age: user.age,
      email: user.email
    };
    console.log(adminDetails);
  } else {
    // 普通用户只能查看部分信息
    const regularDetails: RegularUserDetails = {
      name: user.name,
      email: user.email
    };
    console.log(regularDetails);
  }
};

3. 接口的扩展和重构

场景：随着时间推移，我们可能需要对用户信息进行扩展或重构。

使用Pick和Omit进行重构：

interface UserV1 {
  name: string;
  age: number;
  email: string;
  address: string;
}

// 假设我们需要创建一个新的接口UserV2，它不包含address属性
interface UserV2 extends Omit<UserV1, 'address'> {
  phone: string;
}

const migrateUserV1toV2 = (userV1: UserV1): UserV2 => {
  return {
    ...userV1,
    phone: "123-456-7890" // 假设这是新添加的电话号码
  };
};

4. 高级用例：函数重构和类型保护

场景：在大型应用程序中，我们可能需要重构函数以接受更少的参数，同时保持类型安全。

使用Pick进行函数重构：

function sendWelcomeEmail(user: User) {
  // 发送欢迎邮件的逻辑
}

// 假设我们只需要名字和邮箱来发送邮件
type SendWelcomeEmailParams = Pick<User, 'name' | 'email'>;

// 重构函数以使用新的参数类型
function sendWelcomeEmailRefactored(user: SendWelcomeEmailParams) {
  sendWelcomeEmail(user as User); // 由于SendWelcomeEmailParams是User的子集，这是安全的
}

const user: User = {
  name: "Jane Doe",
  age: 25,
  email: "jane.doe@example.com",
  address: "123 Main St"
};

sendWelcomeEmailRefactored(user); // 现在只需要提供name和email