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

简介: 【类型挑战】第一个元素,难度⭐️

知识运用:


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


题目分析:


题目地址:14-easy-firstimage.png

如上图所示我们需要设计一个通用的类型转换工具来提取一组类型中的第一个元素类型,类似于我们数组直接使用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;
复制代码


去演练场验证答案



相关文章
|
7月前
leetcode代码记录(下一个更大元素 II
leetcode代码记录(下一个更大元素 II
28 0
|
7月前
|
索引
leetcode代码记录(下一个更大元素 I
leetcode代码记录(下一个更大元素 I
26 0
|
前端开发
前端知识案例-添加元素到数组中的方式
前端知识案例-添加元素到数组中的方式
76 0
前端知识案例-添加元素到数组中的方式
|
算法 索引
数组中重复的数字(简单难度)
数组中重复的数字(简单难度)
95 0
数组中重复的数字(简单难度)
【C++百日刷题计划】Day2~数组的使用(请编程计算下列给出的二维数组周边元素之和)
【C++百日刷题计划】Day2~数组的使用(请编程计算下列给出的二维数组周边元素之和)
189 0
|
测试技术 索引
【类型挑战】获取元祖长度,难度⭐️
【类型挑战】获取元祖长度,难度⭐️
213 0
【类型挑战】获取元祖长度,难度⭐️
|
测试技术
【类型挑战】元组转换为对象,难度⭐️
【类型挑战】元组转换为对象,难度⭐️
250 0
【类型挑战】元组转换为对象,难度⭐️
|
测试技术
【类型挑战】Push,难度⭐️
【类型挑战】Push,难度⭐️
133 0
【类型挑战】Push,难度⭐️
|
测试技术
【类型挑战】Unshift,难度⭐️
【类型挑战】Unshift,难度⭐️
116 0
【类型挑战】Unshift,难度⭐️
|
JavaScript 前端开发
【重温基础】18.相等性判断
【重温基础】18.相等性判断
220 0