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 一起使用,以创建更复杂的类型映射。
相关推荐
菜鸟una9 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
还是大剑师兰特15 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
一点七加一16 小时前
Harmony鸿蒙开发0基础入门到精通Day01--JavaScript篇
开发语言·javascript·华为·typescript·ecmascript·harmonyos
还是大剑师兰特16 小时前
TypeScript 面试题及详细答案 100题 (61-70)-- 泛型(Generics)
typescript·大剑师·typescript教程·typescript面试题
Linsk18 小时前
为什么BigInt无法通过Babel降级?
前端·typescript·前端工程化
濮水大叔20 小时前
VonaJS AOP编程:魔术方法
typescript·nodejs·nestjs
Mintopia20 小时前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
菜鸟una1 天前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
孟陬1 天前
面试常见问题 TS 的 infer 你会用吗?对象如何转 snake_case
typescript
guangzan1 天前
解决 Semi Design Upload 组件实现自定义压缩,上传文件后无法触发 onChange
typescript·semi design