typescript 类型体操 之 533-easy-concat

实习生小黄
364 阅读3分钟

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

前言

在学习typescript的过程当中，有一个github库对其类型的学习特别有帮助，是一个有点类似于leetcode的刷题项目，能够在里面刷各种关于typescript类型的题目，本片文章带大家做其中简单难度的第八道题 533-easy-concat

下面这个是类型体操github仓库：

type-challenges/type-challenges: Collection of TypeScript type challenges with online judge (github.com)

533-easy-concat

我们首先还是先通过题目的README来看一下题目的要求

image.png

import type { 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']>>,
]

结合题目给的README和测试case，我们就能够得出，题目是需要我们实现一个函数，能够将两个数组何为一个数组，并且数组中的参数要保证是从左往右依次排列的。

利用js进行对比学习

首先我们还是先用js来模拟题目的要求。

我们用数组来进行模拟，新建一个 JSIf 函数，这个函数传入三个参数，第一个参数是一个布尔值，用于判断返回T或者F。

// js
function JSConcat(T,U){
    return [...T,...U]
}

image.png

利用数组的扩展运算符，我们能够很轻松的拿出两个数组的value放入一个数组当中。

实现 Concat

接着我们就按照js的逻辑来实现ts的代码

在之前的题目中我们有提到过关于TS中的扩展运算符： typescript 类型体操 之 14-easy-first - 掘金 (juejin.cn)

但是我们并没有用太多的篇幅去做一个介绍，毕竟那时候只是作为那道题的一个提高解答，今天就稍微进行一个介绍，在类型当中，也有类似于 JS 扩展运算符的语法。

我们可以用它去获取一个数组中所有的value，注意，使用的对象一定只能是一个数组，不然就会报错

image.png

image.png

并且我们可以结合infer关键字，infer关键字可以简单理解为js中的定义变量，这样我们就可以对一个数组做一个扩展运算

image.png

要注意infer关键字定义的变量只能用在 true 分支当中

image.png

那么在知道了 typescript 中也存在着 扩展运算符 之后，这道题就变得很简单了，我们只需要对输入的两个数组做一个简单的合并处理。

image.png

当然输入的泛型必须是一个数组，那么我们可以用 extends 来对它进行约束

type Concat<T extends any[], U extends any[]> = [...T, ...U];

这里使用 any 或者 unknow 都是可以的，至于他们两个的区别，我们之后会再来细说。

这样子我们的测试用例就全部都通过了。

知识点

关于上述提到了部分的知识点：

  1. ... Rest 操作符
  2. infer关键字 

关于 Rest 操作符可以看一下一个github项目中的介绍，至于infer关键字再之后有真正使用到，我们再来做一个介绍。

proposal-object-rest-spread

总结

今天这道题的知识点比较简单，实现起来的难度应该特别小，稍微知道一下扩展运算符的基本语法应该就是没有问题的，但是可以更多的去了解 Rest 操作符 在 typescript 中的一个实际操作需要注意的事项。

avatar
文章
阅读
粉丝