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 一起使用,以创建更复杂的类型映射。
相关推荐
胡西风_foxww8 小时前
TypeScript 元组类型精简知识点
前端·typescript·类型·元祖
濮水大叔11 小时前
如何基于动态关系进行ORM关联查询,并动态推断DTO?
typescript·node.js·orm
Spider_Man18 小时前
预览一开,灵魂出窍!低代码平台的魔法剧场大揭秘🎩✨
前端·低代码·typescript
然我19 小时前
给 React 代码上把锁?TypeScript:这锅我背了!
前端·react.js·typescript
古夕2 天前
TS 导出 PDF:解决表头乱码,实现表格内添加可点击链接
前端·typescript
guangzan2 天前
在 Zustand 中实现 computed 的方式
typescript·zustand
今禾2 天前
# 🚀 深入浅出 TypeScript(下):掌握泛型、接口及 React 中的高级应用
前端·javascript·typescript
Spider_Man2 天前
物料区的“超市大冒险”:组件、遥控器与快乐星球的奇遇记 🛒🦄
前端·低代码·typescript
星光不问赶路人2 天前
TypeScript 模块扩展
vue.js·typescript