一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情

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


知识运用:

  1. 认识什么是as const,有什么作用;
  2. 如何得到数组类型中的元素类型
  3. Typeof 类型运算符的到被引用变量或属性的类型;

    题目分析:

    题目地址:11-easy-tuple-to-object
    image.png
    如上图所示我们需要设计的类型工具需要满足将一个数组转为由其元素组成的key和value看着相同的对象类型。

    题目解答:

    测试用例:

    测试用例还是挺简单的比较经过我们设计的类型工具处理后的结果后定义的内容是否一致,但当我们的元祖中元素存在对象类型时会抛出错误。 ```typescript / _ 测试用例 _ / // 完整测试用例可见 type-challenges项目,点击题目链接可转到 import { Equal, Expect } from ‘@type-challenges/utils’

const tuple = [‘tesla’, ‘model 3’, ‘model X’, ‘model Y’] as const

type cases = [ Expect, { tesla: ‘tesla’; ‘model 3’: ‘model 3’; ‘model X’: ‘model X’; ‘model Y’: ‘model Y’}>>, ]

// @ts-expect-error type error = TupleToObject<[[1, 2], {}]>

  1. <a name="I7Xzs"></a>
  2. #### 答案及解析:
  3. 1. 通过typeof tuple处理后我们得到了由只读的tuple内容组成的一份类型数组,在这里我们需要通过T[number]来得到元素的类型。
  4. 1. 同样通过in来映射匹配数组每一条元素,当然了value也是这里的key,是相同的。
  5. 1. 当然作为对象的key是不可以使用对象,数组这些类型的,所以我们的T需要约束为string[]类型来满足条件。
  6. ```typescript
  7. /* _____________ 答案 _____________ */
  8. type TupleToObject<T extends readonly string[]> = {
  9. [key in T[number]]: key;
  10. }

在演练场验证答案
接下来的一题是:【类型挑战】第一个元素,难度⭐️

推荐:GFE前端团队,欢迎各位XD点赞,评论,关注~


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