美文网首页
【类型挑战】实现 Pick,难度⭐️

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

作者: DevSpoon | 来源:发表于2022-04-10 00:56 被阅读0次

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


    知识运用:

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

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

    题目分析:

    题目地址:4-easy-pick

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

    在演练场看解题过程

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


    欢迎关注我的公众号“前端小鑫同学”,原创技术文章第一时间推送。

    本文由博客一文多发平台 OpenWrite 发布!

    相关文章

      网友评论

          本文标题:【类型挑战】实现 Pick,难度⭐️

          本文链接:https://www.haomeiwen.com/subject/ljnmsrtx.html