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

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


知识运用:

  1. 条件类型的使用与学习;
  2. 索引访问类型的使用与学习;
  3. 数组解构的应用;
  4. 递归的应用;

    题目分析:

    题目地址:898-easy-includes
    image.png
    如上图所示我们需要实现一个includes函数,当我们传入的类型在所给数组中存在在返回true,反之返回false,那么我们就在类型编程实现这么一个通用的类型工具吧。

    题目解答:

    测试用例:

    本次的测试用例很多,这道看似简单的问题实际上并不简单,当你看到传入的数组中的各式各样的类型的时候,我们逐步尝试解决。 ```typescript / _ 测试用例 _ / import { Equal, Expect } from ‘@type-challenges/utils’

type cases = [ Expect, true>>, Expect, false>>, Expect, true>>, Expect, false>>, Expect, true>>, Expect, true>>, Expect, false>>, Expect, false>>, Expect, false>>, Expect, true>>, Expect, false>>, Expect, false>>, Expect, false>>, Expect, false>>, Expect, false>>, Expect, false>>, ]

  1. <a name="PmMvx"></a>
  2. #### 答案及解析:
  3. 第一次尝试答案:<br />按照我们通常的做法,既然要确定是否存在那必须用到条件类型来做处理,所以出现了下面的第一种方式,但是观察测试用例后发现1,3,5,6,10都没有通过,居然第一条都不通过,我们接着尝试。
  4. ```typescript
  5. /* _____________ 第一次尝试答案 _____________ */
  6. type Includes<T extends readonly any[], U> = U extends T ? true : false;

第二次尝试答案:
这一次我们想起来T[number]可以得到数组中元素类型,这样用条件类型匹配是否可以呢?再观察测试用例后发现原来通过的又不行了,但是也有一些通过了。那有没有简单实用的办法呢?接着往下看。

  1. /* _____________ 第二次尝试答案 _____________ */
  2. type Includes<T extends readonly any[], U> = U extends T[number] ? true : false;

最终的正确答案:
最终的版本我觉得属于比较笨但是最实用,最可靠,因为我们采用递归的方式不停的从数组中取出第一个元素来与U进行比较,指到递归结束。

  1. /* _____________ 最终的正确答案 _____________ */
  2. type Includes<T extends readonly any[], U> = T extends [infer X, ...infer Y] ? (Equal<X, U> extends true ? true : Includes<Y, U>) : false;

去演练场验证答案

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


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