【类型挑战】实现 Pick,难度⭐️

简介: 【类型挑战】实现 Pick,难度⭐️

知识运用:


在实现Pick这道题目的过程中运用到的知识点如下:

  1. Keyof 类型运算符;
  2. Mapped Types 映射类型;
  3. Indexed Access Types:索引访问类型;
  4. 泛型中约束类型参数


题目分析:


题目地址:4-easy-pick7.png如图所示我们需要设计一个通用类型工具MyPick来支持从接口Todo中获取到title或completed属性并组成一个新的类型。


题目解答:


测试用例:

  1. 满足从Todo接口取出属性title及类型与Expected1类型一致。
  2. 满足从Todo接口取出属性title和completed及类型构成联合类型与Expected2类型一致。
  3. 当需要取出在Todo中不存在的属性invalid及类型时将抛出错误。
/* _____________ 测试用例 _____________ */
// 完整测试用例可见 type-challenges项目,点击题目链接可转到
import { Equal, Expect } from '@type-challenges/utils'
type cases = [
  Expect<Equal<Expected1, MyPick<Todo, 'title'>>>,
  Expect<Equal<Expected2, MyPick<Todo, 'title' | 'completed'>>>,
  // @ts-expect-error
  MyPick<Todo, 'title' | 'completed' | 'invalid'>,
]


答案及解析:

/* _____________ 答案 _____________ */
type MyPick<T, K extends keyof T> = {
  [key in K]: T[key]
}


在演练场验证答案

  1. 通过keyof T来得到接口中所有属性的字符串组成的合集;
  2. 使用in来遍历联合类型K得到每次遍历的值key,形式为[key in keyof T];
  3. 使用索引访问类型,得到接口中特定属性的类型,形式为T[key];
  4. 使用extends来约束K均来自于T中;


在演练场看解题过程



相关文章
|
7月前
|
程序员 API
Compose:警惕Loop(遍历),图文并茂带你深度释疑,解决的不仅是性能问题
Compose:警惕Loop(遍历),图文并茂带你深度释疑,解决的不仅是性能问题
145 0
|
人工智能 自然语言处理
爆火的ChatGPT太强了!写代码、改bug,网友:可取代Stack Overflow了
爆火的ChatGPT太强了!写代码、改bug,网友:可取代Stack Overflow了
187 0
|
前端开发 安全 Shell
对象准备入手前端开发,我连夜给ta准备了这篇git指南之终极奥义
对象是真的,连夜码字是真的,Git指南也是真的
257 0
对象准备入手前端开发,我连夜给ta准备了这篇git指南之终极奥义
|
测试技术
【类型挑战】Push,难度⭐️
【类型挑战】Push,难度⭐️
133 0
【类型挑战】Push,难度⭐️
|
测试技术
【类型挑战】Unshift,难度⭐️
【类型挑战】Unshift,难度⭐️
116 0
【类型挑战】Unshift,难度⭐️
|
前端开发 测试技术
【类型挑战】Awaited,难度⭐️
【类型挑战】Awaited,难度⭐️
135 0
【类型挑战】Awaited,难度⭐️
|
测试技术
【类型挑战】If,难度⭐️
【类型挑战】If,难度⭐️
114 0
【类型挑战】If,难度⭐️
|
测试技术 索引
【类型挑战】Includes,难度⭐️
【类型挑战】Includes,难度⭐️
163 0
【类型挑战】Includes,难度⭐️
|
测试技术
【类型挑战】Exclude,难度⭐️
【类型挑战】Exclude,难度⭐️
143 0
【类型挑战】Exclude,难度⭐️
|
JavaScript 前端开发 测试技术
【类型挑战】Concat,难度⭐️
【类型挑战】Concat,难度⭐️
146 0
【类型挑战】Concat,难度⭐️