Lazy loaded image
技术分享
TypeScript 中 Array 与 Tuple 在 length 属性上的类型差异
Words 957Read Time 3 min
2024-2-26
2025-7-3
type
status
date
slug
summary
tags
category
icon
password
在 TypeScript 中,数组(Array)和 元组(Tuple) 是处理集合数据的两种常见方式。它们在类型系统中的表现各有特点,尤其是在处理 length 这一属性时。本文将介绍数组与元组在 length 属性上的类型差异。

Array 类型的 length

在 TypeScript 中,数组类型通常被视为元素类型的集合,而其长度则是灵活可变的。例如,当我们定义了一个字符串数组类型 string[],TypeScript 会将该类型的 length 属性视为 number 类型。这是因为所有数组实例在 JavaScript 中都有一个 length 属性,表示数组中元素的数量。
然而,TypeScript 并不关心数组的具体长度,因为数组可以动态增长或缩短。因此,无论数组实际包含多少元素,其 length 属性的类型始终是 number,这反映了数组在运行时的动态性。

Tuple 类型的长度

与数组不同,Tuple 类型是具有固定长度和已知元素类型的数组。在 TypeScript 中,Tuple 的长度是其类型签名的一部分,这意味着 length 属性具有精确的类型表示。
以一个包含字符串和数字的 Tuple 类型 [string, number] 为例,其 length 属性的类型将是一个具体的数字字面量,准确地反映了 Tuple 中元素的数量。
这种精确的长度类型为 TypeScript 提供了额外的类型安全性,因为它确保了 Tuple 的长度在编译时是固定的,这与数组类型提供的灵活性形成鲜明对比。

判断类型是否为 Tuple

TS 类型体操项目 type-challenges 中有道题是 IsTuple,判断类型 T 是否为 Tuple 类型,下面是一些测试用例。
一般涉及到 Tuple, 我们自然会想到判断类型的 length 属性,我最初写的代码如下:
但是只能满足 case1 和 case2,而 case3 我们期望是 false,上面的写法也会为 true。
这时候就需要用到本篇文章讲的知识点来排除 T 为数组的情况了,我们反过来使用 number extends T['length'] 来判断,如果满足条件,说明 T['length'] 类型为 number,那么 T 为数组,返回 false。

总结

TypeScript 的 Array 类型和 Tuple 类型在处理 length 属性时展现了不同的类型特性:
  • 数组类型的 length 属性为 number,反映了数组在运行时可以动态变化的特性。
  • Tuple 类型的 length 属性是一个具体的数字字面量,确保了 Tuple 的长度在编译时是固定且类型安全的。
这种差异体现了 TypeScript 类型系统的深度和灵活性,允许开发者在不同的场景下选择最合适的类型来表达数据结构。通过对这些细微差别的理解,我们可以更加精确地控制类型,从而编写出更可靠、更易于维护的代码。
上一篇
Next.js 项目部署到云服务器
下一篇
TypeScript 类型体操之 - SimpleVue