TypeScript 元组

类型化数组

元组是一个类型化 数组，具有预定义的长度和每个索引的类型。

元组可以让数组中的每个元素都是已知类型的值。

要定义元组，请指定数组中每个元素的类型：

实例

// define our tuple
let ourTuple: [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'hello world'];
console.log(ourTuple);

正如你所看到的，我们有一个数字，布尔值和一个字符串。但是，如果我们将它们的顺序设置错误，会发生什么呢:

实例

// define our tuple
let ourTuple: [number, boolean, string];
// initialize incorrectly throws an error
ourTuple = [false, 'error occur', 5];
console.log(ourTuple);

只读元组

将 元组 设置为 readonly（只读）是一个很好的习惯。

元组只有强定义的初始值类型:

实例

// define our tuple
let ourTuple: [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'hello world'];
// We have no type safety in our tuple for indexes 3+
ourTuple.push('Something new and wrong');
console.log(ourTuple);

您可以看到，新的 valueTuple 仅具有针对初始值的强定义类型:

实例

// define our tuple
let ourTuple: [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'hello world'];
// We have no type safety in our tuple for indexes 3+
ourTuple.push('Something new and wrong');
// instead use our readonly tuple
const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'hello world'];
// throws error as it is readonly.
ourReadonlyTuple.push('hello goodday');

想了解有关 readonly 等访问修饰符的更多信息，请阅读本站的这个章节：TypeScript 类。

如果您在使用元组之前使用过 React，那么

useState 返回值的元组和 setter 函数。

const [firstName, setFirstName] = useState('Dylan') 是一个普通例子。

由于这种结构，我们知道列表中的第一个值将是一种特定的值类型，在本例中是一个 string 字符串，第二个值是一个 function 函数。

命名元组

命名元组 让我们可以为每个索引的值提供上下文。

实例

const graph: [x: number, y: number] = [55.2, 41.3];

解构元组

由于元组是数组，我们也可以对它们进行解构函数。

实例

const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;

想了解更多解构知识，请访问 这里 。