「这是我参与2022首次更文挑战的第14天,活动详情查看:2022首次更文挑战」
前言
在学习typescript的过程当中,有一个github库对其类型的学习特别有帮助,是一个有点类似于leetcode的刷题项目,能够在里面刷各种关于typescript类型的题目,本片文章带大家做其中简单难度的第五道题 18-easy-tuple-length
18-easy-tuple-length
我们首先还是先通过题目的README来看一下题目的要求
type cases = [
Expect<Equal<Length<typeof tesla>, 4>>,
Expect<Equal<Length<typeof spaceX>, 5>>,
// @ts-expect-error
Length<5>,
// @ts-expect-error
Length<'hello world'>,
]
复制代码
结合题目给的README和测试case,我们就能够得出,题目是需要我们实现一个函数,接收一个 readonly 的数组,并且返回这个数组的长度。
从测试中我们可以发现一个关键点,如果传入的类型不是一个数组,那我们应该进行一个报错的判断。
接下来我们就开始做题
利用js进行对比学习
首先我们还是先用js来模拟题目的要求。
这次题目的要求是实现一个函数并且接收一个数组,返回这个数组的length,并且要添加判断,如果输入的类型不是一个数组,要进行一个判断。
// js
function getLength(arr) {
if (!Array.isArray(arr)) return;
return arr.length;
}
复制代码
实现 Length
接着我们就按照js的逻辑来实现ts的代码
- 获取数组中的length属性我们可以用昨天提到过的
T['length']
的方式来获取
- 并且需要给传入的类型添加一个约束,一定是一个数组。
但是测试例子并没有通过,我们可以通过阅读一下测试的报错来看一下缺少的部分:
测试很明显的告诉了我们,传入的数组是一个 readonly 的,不能赋值给 any[]
- 那我们只需要给 any[] 在加一层 readonly 的约束:
这样测试就可以通过了
知识点
关于上述提到了部分的知识点:
- 元组类型(Tuple Types)
今天提到的新知识点就是 元组类型(Tuple Types) 具体的介绍大家可以看一下文档,这里放上由冴羽基于最新的ts英文文档翻译的中文文档。
对于 元组类型(Tuple Types) 的介绍中,第一句就是 元组类型是另外一种 Array
类型,当你明确知道数组包含多少个元素,并且每个位置元素的类型都明确知道的时候,就适合使用元组类型。
type StringNumberPair = [string, number];
复制代码
元组类型会具体的告诉你这个数组每一个位置的类型是什么,以及限制数组的长度,这就是和数组类型不同的地方。
对于元组来说,每个位置的类型都是定死的
就像以上,元组的长度是能够直接获得的,但是普通数组只能够限制它的长度是一个number类型,这就是数组类型和元组类型的不同之处。
总结
今天我们认识到了元组类型和数组类型的不同之处,元组类型作为特殊的数组类型,在数组类型的基础上做了进一步的约束,基于这些知识点也是我们完成今天这道题的关键。