【类型挑战】Includes,难度⭐️

简介: 【类型挑战】Includes,难度⭐️

知识运用:


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


题目分析:


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


题目解答:


测试用例:

本次的测试用例很多,这道看似简单的问题实际上并不简单,当你看到传入的数组中的各式各样的类型的时候,我们逐步尝试解决。

/* _____________ 测试用例 _____________ */
import { Equal, Expect } from '@type-challenges/utils'
type cases = [
  Expect<Equal<Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Kars'>, true>>,
  Expect<Equal<Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Dio'>, false>>,
  Expect<Equal<Includes<[1, 2, 3, 5, 6, 7], 7>, true>>,
  Expect<Equal<Includes<[1, 2, 3, 5, 6, 7], 4>, false>>,
  Expect<Equal<Includes<[1, 2, 3], 2>, true>>,
  Expect<Equal<Includes<[1, 2, 3], 1>, true>>,
  Expect<Equal<Includes<[{}], { a: 'A' }>, false>>,
  Expect<Equal<Includes<[boolean, 2, 3, 5, 6, 7], false>, false>>,
  Expect<Equal<Includes<[true, 2, 3, 5, 6, 7], boolean>, false>>,
  Expect<Equal<Includes<[false, 2, 3, 5, 6, 7], false>, true>>,
  Expect<Equal<Includes<[{ a: 'A' }], { readonly a: 'A' }>, false>>,
  Expect<Equal<Includes<[{ readonly a: 'A' }], { a: 'A' }>, false>>,
  Expect<Equal<Includes<[1], 1 | 2>, false>>,
  Expect<Equal<Includes<[1 | 2], 1>, false>>,
  Expect<Equal<Includes<[null], undefined>, false>>,
  Expect<Equal<Includes<[undefined], null>, false>>,
]
复制代码


答案及解析:

第一次尝试答案: 按照我们通常的做法,既然要确定是否存在那必须用到条件类型来做处理,所以出现了下面的第一种方式,但是观察测试用例后发现1,3,5,6,10都没有通过,居然第一条都不通过,我们接着尝试。

/* _____________ 第一次尝试答案 _____________ */
type Includes<T extends readonly any[], U> = U extends T ? true : false;
复制代码


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

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


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

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


去演练场验证答案



相关文章
|
算法 JavaScript
W3Cschool编程实战JS脚本算法挑战:寻找数组中的最大值算法挑战
在右边的大数组中包含了4个小数组,请分别找到每个小数组中的最大值,然后把它们串联起来,形成一个新的数组。
87 0
|
测试技术
【类型挑战】Exclude,难度⭐️
【类型挑战】Exclude,难度⭐️
143 0
【类型挑战】Exclude,难度⭐️
|
测试技术 索引
【类型挑战】实现 Pick,难度⭐️
【类型挑战】实现 Pick,难度⭐️
143 0
【类型挑战】实现 Pick,难度⭐️
|
前端开发 测试技术
【类型挑战】Awaited,难度⭐️
【类型挑战】Awaited,难度⭐️
135 0
【类型挑战】Awaited,难度⭐️
|
测试技术
【类型挑战】If,难度⭐️
【类型挑战】If,难度⭐️
114 0
【类型挑战】If,难度⭐️
|
测试技术
【类型挑战】Unshift,难度⭐️
【类型挑战】Unshift,难度⭐️
116 0
【类型挑战】Unshift,难度⭐️
|
测试技术 索引
【类型挑战】实现 Readonly,难度⭐️
【类型挑战】实现 Readonly,难度⭐️
191 0
【类型挑战】实现 Readonly,难度⭐️
|
JavaScript 前端开发 测试技术
【类型挑战】Concat,难度⭐️
【类型挑战】Concat,难度⭐️
146 0
【类型挑战】Concat,难度⭐️
|
JavaScript 测试技术
【类型挑战】Parameters,难度⭐️
【类型挑战】Parameters,难度⭐️
132 0
【类型挑战】Parameters,难度⭐️
|
测试技术
【类型挑战】Push,难度⭐️
【类型挑战】Push,难度⭐️
133 0
【类型挑战】Push,难度⭐️