TypeScript 入门必读：数组和元组类型全面详解

在现代前端开发中，TypeScript 已经成为了不可或缺的工具。它不仅为 JavaScript 带来了强大的类型系统，还提供了许多实用的类型特性。今天，我们就来深入了解 TypeScript 中的数组和元组类型，看看如何正确使用它们来提升代码质量。

一、数组类型的两种定义方式

1.1 使用泛型定义数组

在 TypeScript 中，最规范的数组定义方式是使用泛型语法Array<元素类型>：

let val: Array<number>;
val = [1, 3, 5];
console.log(val);

数值类型数组示例

如果尝试在数值数组中添加其他类型的元素，TypeScript 会立即给出错误提示：

let val: Array<number>;
val = [1, 3, 'a'];
console.log(val);

类型错误示例

1.2 使用简写语法

对于简单的数组类型，我们可以使用更简洁的类型[] 语法：

let val: string[];
val = ['c', 'b', 'a'];
console.log(val);

字符串数组示例

同样，类型检查也会严格执行：

let val: string[];
val = [1, 'b', 'a'];
console.log(val);

类型错误示例

二、灵活的数组类型定义

2.1 联合类型数组

有时我们需要数组中存储多种类型的数据，这时可以使用联合类型：

let val: (number | string)[];
val = [1, 'b', 'a'];
console.log(val);

联合类型示例

但要注意，联合类型仍然有其限制：

let val: (number | string)[];
val = [1, 'b', 'a', false];
console.log(val);

联合类型错误示例

2.2 任意类型数组

如果确实需要完全的类型灵活性，可以使用any[]：

let val: any[];
val = [1, 'b', 'a', false];
console.log(val);

任意类型数组示例

三、元组类型：更严格的数组

元组（Tuple）是 TypeScript 的特色功能，它允许我们定义一个固定长度和固定类型序列的数组：

let val: [string, number, boolean];
val = ['BNTang', 18, true];
console.log(val);

元组类型示例

元组类型有两个重要的限制：

1. 不能超出指定的长度：

let val: [string, number, boolean];
val = ['BNTang', 18, true, false];
console.log(val);

元组长度错误示例

1. 类型必须严格按照定义的顺序：

let val: [string, number, boolean];
val = [18, 'BNTang', true];
console.log(val);

最佳实践建议

1. 优先使用类型明确的数组，避免过度使用any[]
2. 当数组元素类型单一时，选择类型[] 这种简洁的语法
3. 需要存储固定格式数据时，考虑使用元组类型
4. 使用联合类型数组时，请确保真的需要多种类型
5. 在团队开发中，建议制定统一的数组类型定义规范

总结

TypeScript 的数组和元组类型系统为我们提供了强大的类型检查能力：

• 数组类型帮助我们避免类型混用的错误
• 元组类型确保数据结构的严格性
• 联合类型提供了适度的灵活性
• 类型检查让代码更可靠，维护更轻松

掌握这些类型特性，能够帮助我们写出更健壮的 TypeScript 代码。