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 一起使用,以创建更复杂的类型映射。
相关推荐
羊八井2 小时前
类型、分类定义时使用 type 还是 kind ?
rust·typescript·代码规范
MR_发2 小时前
万字实现带@和表情包的输入框
vue.js·typescript
OEC小胖胖13 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
三水气象台14 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
難釋懷19 小时前
TypeScript-webpack
javascript·webpack·typescript
摸鱼仙人~2 天前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
一生躺平的仔3 天前
TypeScript入门(九)装饰器:TypeScript的"元编程超能力"
typescript
MiyueFE3 天前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
前端拿破轮3 天前
😭😭😭看到这个快乐数10s,我就知道快乐不属于我了🤪
算法·leetcode·typescript
前端_ID林3 天前
每个开发人员都应该知道的 TypeScript 技巧
typescript