TypeScript从零到英雄项目：深入理解元组(Tuple)类型-优快云博客

TypeScript从零到英雄项目：深入理解元组(Tuple)类型

curso-typescript-zero-to-hero Repositório responsável pelo Curso de TypeScript - Zero to Hero 项目地址: https://gitcode.com/gh_mirrors/cu/curso-typescript-zero-to-hero

什么是元组(Tuple)类型？

元组是TypeScript中一种特殊的数组类型，它允许你定义一个具有固定数量元素且每个元素类型已知的数组。与普通数组不同，元组中的每个位置可以有不同的类型，并且元素的顺序和类型必须严格匹配。

基本元组使用

让我们看一个最简单的元组示例：

let pessoa: [string, string, number];
pessoa = ['Glaucia Lemos', 'Cloud Advocate JavaScript', 34];

在这个例子中：

我们定义了一个元组类型pessoa，它包含三个元素：
1. 第一个元素必须是string类型
2. 第二个元素必须是string类型
3. 第三个元素必须是number类型

如果尝试以错误的顺序赋值，TypeScript会报错：

// 错误示例 - 类型和顺序不匹配
pessoa = [34, 'Cloud Advocate JavaScript', 'Glaucia Lemos'];

访问元组元素

访问元组元素的方式与数组相同，使用索引：

console.log(pessoa[1]); // 输出: 'Cloud Advocate JavaScript'

带标签的元组

TypeScript 4.0引入了带标签的元组，使代码更具可读性：

let pessoa2: [nome: string, cargo: string, idade: number] = [
  'Glaucia Lemos', 
  'Cloud Advocate JavaScript', 
  34
];

标签不会影响类型检查，但能提供更好的文档和开发体验。

使用展开运算符(Spread Operator)

元组可以与展开运算符一起使用，这在处理可变参数时特别有用：

let listaFrutas = ['🍍', '🍊', '🍎', '🍉', '🥭'];
console.log(...listaFrutas); // 展开输出所有水果

异构元组列表

元组可以包含不同类型的元素，形成异构列表：

let listaFrutas2 = [5, true, ...listaFrutas];
// 类型推断为: (number | boolean | string)[]

函数中的元组应用

元组在函数参数和返回值中非常有用：

示例1：合并两个数组

function listarPessoas(nomes: string[], idades: number[]) {
  return [...nomes, ...idades];
}

let resultado = listarPessoas(['Glaucia', 'Jurema'], [34, 68]);
// 返回类型: (string | number)[]

示例2：可变参数函数

function criarPessoa(...nome: string[]) {
  return [...nome];
}

console.log(criarPessoa('Glaucia', 'Lemos'));
console.log(criarPessoa('Glaucia', 'de Souza', 'Lemos'));