首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【类型挑战】第一个元素,难度⭐️

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

作者头像
前端小鑫同学
发布2022-12-26 10:37:18
发布2022-12-26 10:37:18
35100
代码可运行
举报
运行总次数:0
代码可运行

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

知识运用:

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

题目分析:

题目地址:14-easy-first

如上图所示我们需要设计一个通用的类型转换工具来提取一组类型中的第一个元素类型,类似于我们数组直接使用0号下标获取第一个元素。

题目解答:

测试用例:

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

代码语言:javascript
代码运行次数:0
运行
复制
/* _____________ 测试用例 _____________ */
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' }>
]
答案及解析:

我们在Js开发数组取值的时候往往需要先看一下数组是不是有内容,这个在Ts类型开发中使用 T extends xxx ? 1 :2;的形式,参照三元表达式的操作。extends在这里作用同if。

为了满足传入的必须是数组我们还是通过在泛型中使用extends来做约束。

答案二的解法运用到了数组解构的形式,可以参照ES6中的数组解构来理解。

代码语言:javascript
代码运行次数:0
运行
复制
/* _____________ 答案1 _____________ */
type First<T extends any[]> = T extends [] ? never : T[0];
/* _____________ 答案2 _____________ */
type First<T extends any[]> = T extends [infer F, ...unknown[]] ? F : never;

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 知识运用:
  • 题目分析:
  • 题目解答:
    • 测试用例:
    • 答案及解析:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档