Typescript元组,以及它们是如何工作的

在 Javascript 中,我们期待很快出现一种称为元组的新原始数据类型。然而,在 Typescript 中,Tuple已经存在的概念。

Typescript 中的 Tuple 很像 Javascript 中的数组,并且它具有已知长度,其中每个项目都有已知类型。

如何在 Typescript 中定义元组#

在 Typescript 中定义元组很简单。您需要做的就是将类型定义为已知类型的数组。例如,以下常量是一个元组:

const myTuple:[ string, number ] = [ "some", 15 ]

当我们第一次定义元组时,它应该是一个数组,它应该有一个已知的长度,并且每个元素应该有一个已知的类型

在 Typescript 中定义元组数组#

我们还可以在 Typescript 中定义一个元组数组。这是通过添加[]到我们的 Tuple 类型定义的末尾来完成的:

let myTuple:[ string, number ][] = [ [ "some", 15 ], [ "other", 20 ], [ "tuple", 50 ] ];

改变 Typescript 元组#

与原生 Javascript 中的元组类型不同,Typescript 元组默认情况下是可变的 – 因此它们可以更改。因此,我们可以通过简单地引用我们要更新的元素并重新定义它来更新元组,假设它不是一个常量:

let myTuple:[ string, number ] = [ "some", 15 ]

myTuple[1] = 20;

但是,如果我们尝试将 Tuple 的元素更改为不同的类型,则会出现类型错误。例如,如果我们尝试运行myTuple[1] = "string",我们会收到以下错误:

Type 'string' is not assignable to type 'number'.

有趣的是,如果我们尝试通过 using 来扩展 Tuple 的长度,除非我们在常量上使用,或者我们使用的类型不在原始类型列表中,myTuple.push(5)否则我们不会得到错误。push()

这意味着一旦定义了一个元组,它不再必须是已知的长度,只要每个元素符合我们在第一次创建元组时定义的原始类型之一。所以myTuple.push(5)在上述情况下有效 – 但myTuple.push(true)不是true这样boolean

在 Typescript 中创建只读元组#

如果我们想在 Typescript 中创建一个不可变的、只读的 Tuple,我们可以readonly在定义我们的 Tuple 时使用关键字。

为此,我们将变量定义为:

const myArray:readonly[number, string] = [10, 'test'];

如果我们试图改变或改变这个元组,我们会得到一个错误。例如,如果我们push()现在使用,我们会得到以下错误:

Property 'push' does not exist on type 'readonly [number, string]'.

同样,myArray[0] = 15将返回以下错误:

Cannot assign to '0' because it is a read-only property.