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

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

作者头像
前端小鑫同学
发布于 2022-12-26 02:42:05
发布于 2022-12-26 02:42:05
1.2K00
代码可运行
举报
运行总次数:0
代码可运行

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

知识运用:

  1. 泛型约束输入类型;
  2. 数组解构参照ES6文档。 题目分析: 题目地址:533-easy-concat

本次案例相对简单,通过实现一个通用的类型工具支持将两个数组中包含的类型合并到一个数组集合中。功能类似于我们在JavaScript中的Array.concat函数。 题目解答: 测试用例:

  1. 依次将两个数组中的元素提取并按顺序进行整合。
  2. 当两个数组传入均为空的时候,我们得到的结果也将是一个空数组。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* _____________ 测试用例 _____________ */
import { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Concat<[], []>, []>>,
  Expect<Equal<Concat<[], [1]>, [1]>>,
  Expect<Equal<Concat<[1, 2], [3, 4]>, [1, 2, 3, 4]>>,
  Expect<Equal<Concat<['1', 2, '3'], [false, boolean, '4']>, ['1', 2, '3', false, boolean, '4']>>,
]
复制代码
答案及解析:
  1. 依据题目要求和测试用例得到我们设计的类型工具满足支持两个数组参数的传入,但数组的类型不做要求,这个我们还是用泛型来约束传入类型。分别约束类型T和U。
  2. 如何将两个数组展平后合并到一个数组里面呢?这里需要使用到的知识点依旧是数组解构,使用解构将直接展平我们的一维数组,分别将两个展平的数组放到索引0和1的位置,最后得到的结果将满足所提供的4条测试用例。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/* _____________ 你的代码 _____________ */
type Concat<T extends any[], U extends any[]> = [...T, ...U];
复制代码

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

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【类型挑战】第一个元素,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 条件类型的使用:文档地址 infer关键字也参照条件类型使用的文档 在泛型中对类型做约束:文档地址 索引访问类型:文档地址 题目分析: 题目地址:14-easy-first 如上图所示我们需要设计一个通用的类型转换工具来提取一组类型中的第一个元素类型,类似于我们数组直接使用0号下标获取第一个元素。 题目解答: 测试用例: 通过测试用例可以看到仅当我们传入的是一个数组或元祖时才可以返回第
前端小鑫同学
2022/12/26
3510
【类型挑战】第一个元素,难度⭐️
【类型挑战】实现 Pick,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 在实现Pick这道题目的过程中运用到的知识点如下: Keyof 类型运算符; Mapped Types 映射类型; Indexed Access Types:索引访问类型; 泛型中约束类型参数; 题目分析: 题目地址:4-easy-pick 如图所示我们需要设计一个通用类型工具MyPick来支持从接口Todo中获取到title或completed属性并组成一个新的类型。
前端小鑫同学
2022/12/26
3510
【类型挑战】实现 Pick,难度⭐️
【类型挑战】Unshift,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 条件类型的灵活运用; 分布式条件类型的灵活运用; 解构完美解答此题; 题目分析: 题目地址:3060-easy-unshift 这道题的题面应该也不用多数,实现一个类数组unshift的功能,将我们的U传入到T的第一个位置。 题目解答: 测试用例: 测试用例和上一道题几乎是一样的,,只是向数组第一个元素的位置插入新的元素,我们这次的解法是不是可以直接复用呢?一起来看一下。 /* ____
前端小鑫同学
2022/12/26
3590
【类型挑战】Unshift,难度⭐️
【类型挑战】最后一个元素,难度⭐️⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 条件类型的使用:文档地址 infer关键字也参照条件类型使用的文档 在泛型中对类型做约束:文档地址 索引访问类型:文档地址 题目分析: 题目地址:15-medium-last 如上图所示,我们需要设计的通用类型工具需要满足重一个数组中取出最后一个元素来当我们的输出类型。本题和我们一开始取数组类型第一个元素一样。 题目解答: 测试用例: 需满足两个测试用例,分别将使用Last类型工具的到
前端小鑫同学
2022/12/26
1.1K0
【类型挑战】最后一个元素,难度⭐️⭐️
【类型挑战】If,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 要求限制输入为指定类型时需要考虑到使用泛型进行约束; 当需要进行类型选择判断的使用考虑使用条件类型; 题目分析: 题目地址:268-easy-if 如上图所示我们需要实现一个通用的类型工具,来实现if条件判断,当传入的第一个参数的结果为真则返回第二个参数的类型,反之返回第三个参数的类型 题目解答: 测试用例: 当输入第一个参数为真,则返回第二个参数类型‘a’; 当输入第
前端小鑫同学
2022/12/26
4110
【类型挑战】If,难度⭐️
【类型挑战】出栈,难度⭐️⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 条件类型的使用:文档地址 infer关键字也参照条件类型使用的文档 在泛型中对类型做约束:文档地址 索引访问类型:文档地址 题目分析: 题目地址:16-medium-pop 如上图所示,我们需要设计一个通用类型工具来实现JavaScript中数组的Pop操作,将后入栈的数据剔除并返回剩余内容。 题目解答: 测试用例: 第一条用例:输入内容为数组【3,2,1】,执行出栈操作后将会把最后入
前端小鑫同学
2022/12/26
2780
【类型挑战】出栈,难度⭐️⭐️
【类型挑战】获取元祖长度,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 目前还用的少的类型unknown,可以看一下抽象类型的分配性。 还有必不可少的泛型约束。 通过索引形式获取数组类型长度。 题目分析: 题目地址:18-easy-tuple-length 如上图所示我们需要设计一个通用的获取数组长度的类型工具,当我们传入一个只读数组后返回它的实际长度。 题目解答: 测试用例: 测试用例要求tesla的长度符合预期4和spaceX的长度符合
前端小鑫同学
2022/12/26
2.1K0
【类型挑战】获取元祖长度,难度⭐️
【类型挑战】Awaited,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 在条件类型中进行类型推断 泛型约束 题目分析: 题目地址:189-easy-awaited 我们在使用Promise时往往可以通过泛型来约束最后返回时的对象类型,我们这道题就需要设计一个类型工具来得到Promise返回的这个类型。 题目解答: 测试用例: 约束传入的类型一定是一个Promise对象,当传入非Promise对象时将抛出错误。 当我们传入Promise对象时将返回对应T的类
前端小鑫同学
2022/12/26
4740
【类型挑战】Awaited,难度⭐️
【类型挑战】获取函数返回类型,难度⭐️⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 认识什么是returntypetype。 题目分析: 题目地址:2-medium-return-type 如上图所示,我们需要设计一个通用了类型工具还提取函数类型的返回类型,功能同内置的ReturnType。 题目解答: 测试用例: 给出的测试用例挺多但是没有特殊需要说明的,我们只需要通过设计的类型工具取出到通过Equal来进行比较即可。 /* _____________ 测试用例 _
前端小鑫同学
2022/12/26
1.6K0
【类型挑战】获取函数返回类型,难度⭐️⭐️
【类型挑战】元组转换为对象,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 认识什么是as const,有什么作用; 如何得到数组类型中的元素类型; Typeof 类型运算符的到被引用变量或属性的类型; 题目分析: 题目地址:11-easy-tuple-to-object 如上图所示我们需要设计的类型工具需要满足将一个数组转为由其元素组成的key和value看着相同的对象类型。题目解答: 测试用例: 测试用例还是挺简单的比较经过我们设计的类型工具处理后的
前端小鑫同学
2022/12/26
7190
【类型挑战】元组转换为对象,难度⭐️
【类型挑战】Parameters,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 认识什么parameterstype和其作用;题目分析: 题目地址:3312-easy-parameters 的作用就是获取一个函数的参数类型组成的元祖,接下来我们通过这道题来详细看一下。 题目解答: 测试用例: 本次的测试案例可以看出,我们需要考虑输入类型为内置类型,字面量类型和未传入类型的情况,测试用例同样使用到了typeof来讲js世界申明的变量转换为类型世界的类型。 /* _
前端小鑫同学
2022/12/26
3940
【类型挑战】Parameters,难度⭐️
【类型挑战】实现 Readonly,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 认识什么是readonly,和常量的区别是什么? Indexed Access Types:索引访问类型; Keyof 类型运算符; Mapped Types 映射类型; 题目分析: 题目地址:7-easy-readonly 如图所示我们需要设计一个通用类型工具MyReadonly接收传入的Todo接口并遍历每一条属性去设置为只能读取不能编辑,并返回这样的类型结构,功能
前端小鑫同学
2022/12/26
5830
【类型挑战】实现 Readonly,难度⭐️
【类型挑战】Exclude,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: Exclude将从联合类型中排除特点的类型后输出剩余联合类型 条件类型运用 分布式条件类型运用题目分析: 题目地址:43-easy-exclude 如上图所示我们需要设计一个与内置Exclude功能一致的类型工具,从已知的联合类型中排除指定类型后将剩余类型返回。 题目解答: 测试用例: /* _____________ 测试用例 _____________ */ import {
前端小鑫同学
2022/12/26
6310
【类型挑战】Exclude,难度⭐️
【类型挑战】Trim Left,难度⭐️⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 涉及到模板字符类型。 涉及到infer关键字使用。 题目分析: 题目地址:106-medium-trimleft 实现 TrimLeft<T> ,它接收确定的字符串类型并返回一个新的字符串,其中新返回的字符串删除了原字符串开头的空白字符串。 例如 type trimed = TrimLeft<' Hello World '> // 应推导出 'Hello World ' 题目解答: 测试
前端小鑫同学
2022/12/26
8650
【类型挑战】Trim,难度⭐️⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 涉及到模板字符类型。 涉及到infer关键字使用。 涉及到类型编程中递归使用。 题目分析: 题目地址:108-medium-trim 实现Trim<T>,它是一个字符串类型,并返回一个新字符串,其中两端的空白符都已被删除。 例如 type trimed = Trim<' Hello World '> // expected to be 'Hello World' 题目解答: 测试用例: 通
前端小鑫同学
2022/12/26
9350
【类型挑战】Trim Right,难度⭐️⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 涉及到模板字符类型。 涉及到infer关键字使用。 题目分析: 题目地址:4803 - Trim Right 实现 TrimRight<T> ,它接收确定的字符串类型并返回一个新的字符串,其中新返回的字符串删除了原字符串结尾的空白字符串。 例如 type Trimed = TrimLeft<' Hello World '> // 应推导出 ' Hello World' 题目解答: 测试用
前端小鑫同学
2022/12/26
7900
【类型挑战】Includes,难度⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 条件类型的使用与学习; 索引访问类型的使用与学习; 数组解构的应用; 递归的应用;题目分析: 题目地址:898-easy-includes 如上图所示我们需要实现一个includes函数,当我们传入的类型在所给数组中存在在返回true,反之返回false,那么我们就在类型编程实现这么一个通用的类型工具吧。题目解答: 测试用例: 本次的测试用例很多,这道看似简单的问题实际上并不简
前端小鑫同学
2022/12/26
4560
【类型挑战】Includes,难度⭐️
【类型挑战】实现 Omit,难度⭐️⭐️
如上图所示,我们需要实现的通用类型工具的要求需要满足可以将传入的对象在忽略掉指定key的字段后再返回输出。
前端小鑫同学
2022/12/26
3470
【类型挑战】实现 Omit,难度⭐️⭐️
【类型挑战】深度 Readonly,难度⭐️⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 基础对象Readonly处理。 递归在类型编程中的运用。 如果类型的内容是函数类型,那么keyof得到的事never类型。题目分析: 题目地址:9-medium-deep-readonly 如上图所示,我们需要设计一个通用的类型工具可以将一个深度嵌套的对象的key全部处理成readonly。 题目解答: 测试用例: 测试用例比较简单,我们来看答案解析吧。 /* ____________
前端小鑫同学
2022/12/26
7190
【类型挑战】深度 Readonly,难度⭐️⭐️
【类型挑战】Readonly 2,难度⭐️⭐️
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ 知识运用: 认识和使用Omit。 认识和使用Pick。 认识和使用。 题目分析: 题目地址:8-medium-readonly-2 如上图所示,这道题目涉及的内容较多,难度对于刚学类型编程不就的伙伴来说挺难的,我们先参考社区的答案来解析,后续巩固。 题目解答: 测试用例: 本次测试用例重点关注前两个即可,一个是需要全部处理为Readonly,而另一个需要对指定的KEY处理为Readonly。 /*
前端小鑫同学
2022/12/26
6400
【类型挑战】Readonly 2,难度⭐️⭐️
相关推荐
【类型挑战】第一个元素,难度⭐️
更多 >
领券
一站式MCP教程库,解锁AI应用新玩法
涵盖代码开发、场景应用、自动测试全流程,助你从零构建专属AI助手
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档