锐客网

  1. 首页 > it技术 > >

【类型挑战】实现|【类型挑战】实现 Pick，难度??

Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～
知识运用：
【【类型挑战】实现|【类型挑战】实现 Pick，难度??】在实现Pick这道题目的过程中运用到的知识点如下：
  1. Keyof 类型运算符；
  2. Mapped Types 映射类型；
  3. Indexed Access Types：索引访问类型；
  4. 泛型中约束类型参数；
    题目分析：
    题目地址：4-easy-pick
    【类型挑战】实现|【类型挑战】实现 Pick，难度??
    文章图片

    如图所示我们需要设计一个通用类型工具MyPick来支持从接口Todo中获取到title或completed属性并组成一个新的类型。
    题目解答：
    测试用例：
  5. 满足从Todo接口取出属性title及类型与Expected1类型一致。
  6. 满足从Todo接口取出属性title和completed及类型构成联合类型与Expected2类型一致。
  7. 当需要取出在Todo中不存在的属性invalid及类型时将抛出错误。
    /* _____________ 测试用例 _____________ */ // 完整测试用例可见 type-challenges项目，点击题目链接可转到 import { Equal, Expect } from '@type-challenges/utils'type cases = [ Expect>>, Expect>>, // @ts-expect-error MyPick, ]

    答案及解析：
    /* _____________ 答案 _____________ */type MyPick = { [key in K]: T[key] }

    在演练场验证答案
  8. 通过keyof T来得到接口中所有属性的字符串组成的合集；
  9. 使用in来遍历联合类型K得到每次遍历的值key，形式为[key in keyof T]；
  10. 使用索引访问类型，得到接口中特定属性的类型，形式为T[key]；
  11. 使用extends来约束K均来自于T中；
在演练场看解题过程
接下来的一题是：【类型挑战】实现 Readonly，难度??，尽情期待！
欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。
本文由博客一文多发平台 OpenWrite 发布！

    推荐阅读


    上一篇：上手JavaScript基准测试

    下一篇：使用PlopJs让开发变得更高效