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

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


知识运用:

  1. 目前还用的少的类型unknown,可以看一下抽象类型的分配性
  2. 还有必不可少的泛型约束
  3. 通过索引形式获取数组类型长度。

    题目分析:

    题目地址:18-easy-tuple-length
    image.png
    如上图所示我们需要设计一个通用的获取数组长度的类型工具,当我们传入一个只读数组后返回它的实际长度。

    题目解答:

    测试用例:

  4. 测试用例要求tesla的长度符合预期4和spaceX的长度符合预期5;

  5. 当传入数字和字符串时将抛出错误。 ```javascript / _ 测试用例 _ / // 完整测试用例可见 type-challenges项目,点击题目链接可转到 import { Equal, Expect } from ‘@type-challenges/utils’

const tesla = [‘tesla’, ‘model 3’, ‘model X’, ‘model Y’] as const const spaceX = [‘FALCON 9’, ‘FALCON HEAVY’, ‘DRAGON’, ‘STARSHIP’, ‘HUMAN SPACEFLIGHT’] as const

type cases = [ Expect, 4>>, Expect, 5>>, // @ts-expect-error Length<5>, // @ts-expect-error Length<’hello world’>, ]

  1. <a name="EQBSl"></a>
  2. #### 答案及解析:
  3. 1. 在Ts类型编程中获取数组长度的方式和获取其中一个元素的方式一样,需要通过特定的“length”来读取,形式为:T["length"];
  4. 1. 为了满足传入类型的限制我们依然使用泛型处理,传入类型限制为仅支持只读形式的任意数组即可。
  5. 1. 可以看到在测试用例中有通过as const转换,根据前面的学习这条数据会被转化成只读的类型数组
  6. ```javascript
  7. /* _____________ 答案代码 _____________ */
  8. type Length<T extends readonly unknown[]> = T["length"];

去演练场验证答案

接下来的一题是:【类型挑战】Exclude,难度⭐️

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


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