【TS】【TS类型体操】【简单】01实现pick

嘤嘤怪呆呆狗

已于 2024-04-08 10:05:48 修改

阅读量450

点赞数 11

分类专栏： TS 文章标签：前端 javascript typescript

于 2023-12-16 10:15:51 首次发布

本文链接：https://blog.csdn.net/qq_45634593/article/details/135028937

版权

TS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍如何在TypeScript中不使用内置的Pick<T,K>，通过自定义MyPick类型来实现类似功能，利用泛型约束和键值对操作，以选择并构造指定类型的特定属性。

摘要由CSDN通过智能技术生成

文章目录

问题描述

不使用 Pick<T, K> ，实现 TS 内置的 Pick<T, K> 的功能。
从类型T 中选出符合 K 的属性，构造一个新的类型。

举例

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

实现

// TypeScript 中，我们可以使用关键字 extends 来进行泛型约束。extends 关键字用于约束泛型类型参数，以确保其是指定类型或其子类型。
// extends 在这里是 约束、限制的含义，不是继承
// keyof 是把 后面 的 键 提取出来组成一个 联合类型
// in 是遍历

/**
 * 1、K 增加 泛型约束， 比如，下面有 name、age、height、如果你写一个不在这里面的就会报错
 * 2、in 遍历， 冒号右侧，拿到 键 value 类型
 */
type MyPick<T, K extends keyof T> = {
  [P in K]: T[P];
};

type Case2 = MyPick<
  { name: string; age: number; height: number },
  "name" | "age"
>;

这里就会自动提示

在这里插入图片描述

如果填写不符合，那么就会报错

在这里插入图片描述

TS内置方法

Pick<T, K> 是 TypeScript 内置的一个工具类型（Utility Type），用于从类型 T 中选择指定属性 K 构造出一个新类型
使用 Pick<T, K> 可以实现在一个类型中选择某些属性，然后构造一个新的子类型。它接受两个参数：

T：指定源类型，即要从中选择属性的类型
K：指定要选择的属性名，可以是单个属性名或属性名组成的联合类型

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

type PersonalInfo = Pick<Person, 'name' | 'age'>;

const person: PersonalInfo = {
  name: 'Alice',
  age: 25,
};

console.log(person); // 输出：{ name: 'Alice', age: 25 }