【类型挑战】元组转联合,难度⭐️⭐️

289 阅读2分钟

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

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


知识运用:

  1. T[number]的使用;
  2. 数组类型、元祖类型的属性遍历;
  3. 再次熟悉keyof的使用。

题目分析:

题目地址:10-medium-tuple-to-union image.png 如上图所示,我们需要设计的通用类型工具需要满足将传入的数组类型转为由其元素类型组成的联合类型。

题目解答:

测试用例:

本次的测试用例也相对简单,判定给定的数组类型在转为联合类型后是否一致。

/* _____________ 测试用例 _____________ */
import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<TupleToUnion<[123, '456', true]>, 123 | '456' | true>>,
  Expect<Equal<TupleToUnion<[123]>, 123>>,
]

答案及解析:

  1. 第一步约定输入类型T必须是一个数组类型,可以试任意数组。
  2. 我们在遍历数组类型的时候需要用到in关键词,但直接in T[number]得到每一个Key,我们给value部分也赋值Key。
  3. 那我们得到的结果将是一个对象类型,再通过keyof就得到了最终的联合类型结果。
  4. 还有一种答案就是直接使用T[number]得到的就是一个数组对应的联合类型。不知道社区的答案为啥还是五花八门的,不过多种方案尝试学习比直接用API要好吧。
/* _____________ 答案 _____________ */

type TupleToUnion<T extends any[]> = keyof {
  [Key in T[number]]: Key
}

type TupleToUnion<T extends any[]> = T[number];

去演练场验证答案

接下来的一题是:【类型挑战】链式选项,难度⭐️⭐️


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