ts的Pick,Omit,Partial,Required怎么使用?

ts的Pick,Omit,Partial,Required怎么使用?

1. Pick

在TypeScript中,Pick是一个非常有用的工具类型,它允许你从一个已存在的类型中"挑选"出一个或多个属性,创建一个新的类型。这对于类型映射、条件类型以及创建基于现有类型的新类型时非常有用。

Pick类型的基本语法如下:

typescript 复制代码
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

这里,T 是原始类型,KT 的属性名的集合(通过 keyof T 获取),Pick 创建一个新的类型,这个新类型只包含 K 中指定的属性。

使用示例

假设我们有如下的TypeScript接口:

typescript 复制代码
interface Person {
    name: string;
    age: number;
    location: string;
}

如果我们只想从一个 Person 类型的对象中选取 nameage 属性,我们可以这样做:

typescript 复制代码
type PersonDetails = Pick<Person, 'name' | 'age'>;

// 现在 PersonDetails 类型等价于:
// type PersonDetails = {
//     name: string;
//     age: number;
// }

const personDetails: PersonDetails = {
    name: 'Alice',
    age: 30,
    // 如果尝试添加 location 属性,TypeScript 将报错,因为 PersonDetails 不包含该属性
    // location: 'New York'
};

实际应用

Pick 在处理复杂类型映射时非常有用,特别是在结合其他工具类型(如 OmitPartialRequired 等)时。例如,你可能有一个复杂的对象,但只需要其部分属性用于某个特定的函数或组件。通过使用 Pick,你可以轻松地创建一个仅包含所需属性的新类型,从而保持类型安全和代码清晰度。

注意事项

  • Pick 中的 K 必须是 T 的有效键名集合。如果尝试选取 T 中不存在的属性,TypeScript 将报错。
  • Pick 创建的类型是静态的,即在编译时确定。它不会根据运行时的数据动态改变。

Pick 是TypeScript类型系统中一个非常强大的工具,能够帮助你以类型安全的方式处理复杂的类型映射问题。

在TypeScript中,OmitPartialRequired 是三个非常有用的内置工具类型,它们允许你以声明式的方式修改现有类型的属性。这些工具类型在类型映射、条件类型以及复杂类型操作中特别有用。

2. Omit<T, K>

Omit 工具类型用于从类型 T 中"省略"掉一些属性,生成一个新的类型。这个新类型包含 T 中除了 K 指定的属性之外的所有属性。

语法:

typescript 复制代码
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

(注意:上面的 Omit 定义是基于 PickExclude 的,但实际上在TypeScript中是直接提供的。)

示例:

typescript 复制代码
interface Person {
    name: string;
    age: number;
    location: string;
}

type PersonWithoutLocation = Omit<Person, 'location'>;

// 现在 PersonWithoutLocation 类型等价于:
// type PersonWithoutLocation = {
//     name: string;
//     age: number;
// }

3. Partial<T>

Partial 工具类型将类型 T 的所有属性变为可选的(即属性后加上 ?)。这意味着你可以省略这些属性,或者为它们提供值。

语法:

typescript 复制代码
type Partial<T> = {
    [P in keyof T]?: T[P];
};

示例:

typescript 复制代码
interface Person {
    name: string;
    age: number;
}

type PartialPerson = Partial<Person>;

// 现在 PartialPerson 类型等价于:
// type PartialPerson = {
//     name?: string;
//     age?: number;
// }

4. Required<T>

Partial 相反,Required 工具类型将类型 T 的所有属性变为必需的(即移除所有属性后的 ?)。这在你想要确保一个对象具有所有必需的属性时非常有用。

语法:

typescript 复制代码
type Required<T> = {
    [P in keyof T]-?: T[P];
};

(注意:-? 语法是TypeScript特有的,用于移除可选性。)

示例:

typescript 复制代码
interface PartialPerson {
    name?: string;
    age?: number;
}

type RequiredPerson = Required<PartialPerson>;

// 现在 RequiredPerson 类型等价于:
// type RequiredPerson = {
//     name: string;
//     age: number;
// }

注意事项

  • 这些工具类型都是在编译时解析的,不会影响运行时的JavaScript代码。
  • 它们都是TypeScript语言的一部分,因此你不需要安装任何额外的库来使用它们。
  • 在使用这些工具类型时,请确保你了解它们如何影响你的类型系统,特别是在处理复杂类型或类型映射时。
  • TypeScript提供了许多其他内置的工具类型,如 ReadonlyRecordExcludeExtract 等,它们都可以与 OmitPartialRequired 一起使用,以创建更复杂的类型映射。
相关推荐
天下无贼!12 小时前
2024年最新版TypeScript学习笔记——泛型、接口、枚举、自定义类型等知识点
前端·javascript·vue.js·笔记·学习·typescript·html
Jorah3 天前
1. TypeScript基本语法
javascript·ubuntu·typescript
小白小白从不日白3 天前
TS axios封装
前端·typescript
aimmon4 天前
Superset二次开发之源码DependencyList.tsx 分析
前端·typescript·二次开发·bi·superset
下雪天的夏风4 天前
Vant 按需引入导致 Typescript,eslint 报错问题
前端·typescript·eslint
theMuseCatcher5 天前
Vue3+TypeScript+Vite+Less 开发 H5 项目(amfe-flexible + postcss-pxtorem)
typescript·less·postcss
Qiyandays5 天前
vue + Lodop 制作可视化设计页面 实现打印设计功能(四)
前端·vue.js·typescript
人工智能的苟富贵5 天前
微信小程序中的模块化、组件化开发:完整指南
微信小程序·小程序·typescript
Code blocks7 天前
小试牛刀-区块链Solana多签账户
算法·typescript·区块链·github
shiming88797 天前
Vue 生命周期与 TypeScript:深入理解组件生命周期
前端·vue.js·typescript