首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【类型挑战】实现 Pick,难度⭐️

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

作者头像
前端小鑫同学
发布2022-12-26 10:35:23
发布2022-12-26 10:35:23
35100
代码可运行
举报
运行总次数:0
代码可运行

Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~

知识运用:

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

  1. Keyof 类型运算符;
  2. Mapped Types 映射类型;
  3. Indexed Access Types:索引访问类型;
  4. 泛型中约束类型参数; 题目分析: 题目地址:4-easy-pick

如图所示我们需要设计一个通用类型工具MyPick来支持从接口Todo中获取到title或completed属性并组成一个新的类型。 题目解答: 测试用例:

  1. 满足从Todo接口取出属性title及类型与Expected1类型一致。
  2. 满足从Todo接口取出属性title和completed及类型构成联合类型与Expected2类型一致。
  3. 当需要取出在Todo中不存在的属性invalid及类型时将抛出错误。
代码语言:javascript
代码运行次数:0
运行
复制
/* _____________ 测试用例 _____________ */
// 完整测试用例可见 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'>,
]
复制代码
答案及解析:
代码语言:javascript
代码运行次数:0
运行
复制
/* _____________ 答案 _____________ */

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中;

接下来的一题是:【类型挑战】实现 Readonly,难度⭐️,尽情期待!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 知识运用:
    • 答案及解析:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档