【类型挑战】第一个元素，难度⭐️

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

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

---

知识运用：

1. 条件类型的使用：文档地址
2. infer关键字也参照条件类型使用的文档
3. 在泛型中对类型做约束：文档地址
4. 索引访问类型：文档地址

题目分析：

题目地址：14-easy-first 如上图所示我们需要设计一个通用的类型转换工具来提取一组类型中的第一个元素类型，类似于我们数组直接使用0号下标获取第一个元素。

题目解答：

测试用例：

通过测试用例可以看到仅当我们传入的是一个数组或元祖时才可以返回第一个元素，反之则返回never；

/* _____________ 测试用例 _____________ */
import { Equal, Expect } from '@type-challenges/utils'
 
type cases = [
  Expect<Equal<First<[3, 2, 1]>, 3>>,
  Expect<Equal<First<[() => 123, { a: string }]>, () => 123>>,
  Expect<Equal<First<[]>, never>>,
  Expect<Equal<First<[undefined]>, undefined>>
]
 
type errors = [
  // @ts-expect-error
  First<'notArray'>,
  // @ts-expect-error
  First<{ 0: 'arrayLike' }>
]

答案及解析：

1. 我们在Js开发数组取值的时候往往需要先看一下数组是不是有内容，这个在Ts类型开发中使用 T extends xxx ？ 1 ：2；的形式，参照三元表达式的操作。extends在这里作用同if。
2. 为了满足传入的必须是数组我们还是通过在泛型中使用extends来做约束。
3. 答案二的解法运用到了数组解构的形式，可以参照ES6中的数组解构来理解。

/* _____________ 答案1 _____________ */
type First<T extends any[]> = T extends [] ? never : T[0];
/* _____________ 答案2 _____________ */
type First<T extends any[]> = T extends [infer F, ...unknown[]] ? F : never;

去演练场验证答案

接下来的一题是：【类型挑战】获取元组长度，难度⭐️

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

---

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