当前位置：首页 > news >正文

数组的多种声明方式：类型标注与泛型数组

news 来源：原创 2025/4/27 13:04:57

数组是现代编程语言中的基本数据结构之一，它用于存储多个相同类型的数据。TypeScript 作为一个静态类型的超集，提供了多种方式来声明数组。通过不同的声明方式，我们能够实现不同的类型检查，提升代码的安全性和可读性。

TypeScript 提供了两种主要的方式来声明数组：类型标注和泛型数组。此外，还有一些进阶用法，如多维数组、与接口结合使用等，本文将详细探讨这些方式，并介绍它们的使用场景、优缺点以及具体实现。

1. 类型标注：`类型[]` 的声明方式

在 TypeScript 中，最常见的声明数组的方法是使用类型标注。其基本语法是 类型[]，表示一个元素类型为 类型 的数组。

let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ['apple', 'banana', 'cherry'];

解释：

numbers: number[] 表示 numbers 是一个 number 类型的数组，即数组中的每个元素都是数字类型。
strings: string[] 表示 strings 是一个 string 类型的数组，即数组中的每个元素都是字符串类型。

优点：

简洁明了：这是最常用且最直观的数组声明方式。它符合 JavaScript 数组的基本声明方式，简单易懂。
类型安全：这种方式确保数组中的元素类型一致，防止向数组中插入不合法的类型。

缺点：

只能声明单一类型的数组，不能直接声明多种类型的数组。对于更复杂的数据结构，可能需要考虑其他方法。

2. 泛型数组：`Array<类型>` 的声明方式

除了使用 类型[] 来声明数组，TypeScript 还支持使用泛型来声明数组。其语法是 Array<类型>，也可以表示一个元素类型为 类型 的数组。

let numbers: Array<number> = [1, 2, 3, 4, 5];
let strings: Array<string> = ['apple', 'banana', 'cherry'];

解释：

Array<number> 等同于 number[]，表示一个包含 number 类型元素的数组。
Array<string> 等同于 string[]，表示一个包含 string 类型元素的数组。

优点：

灵活性：泛型语法提供了更大的灵活性，特别是在处理复杂类型时。比如，你可以组合多个泛型参数来声明数组，例如：Array<Array<number>> 表示一个二维数组。
多维数组的声明：当你需要处理多维数组时，泛型语法会更直观。例如，声明一个二维数组 number[][] 或者 Array<Array<number>>。

缺点：

语法稍显冗长：相比 类型[] 的声明方式，Array<类型> 显得稍微复杂一些，尤其是多维数组时，语法会变得更复杂。

3. 数组与元组的区别

虽然数组和元组在 TypeScript 中看起来相似，但它们有一些显著的区别

数组：数组是一种可以存储多个相同类型元素的数据结构，它的长度可以是动态的，且所有元素的数据类型相同。

元组：元组是一种固定长度、可以存储不同类型元素的数据结构，长度和元素的类型在声明时就已经确定。

// 数组
let arr: string[] = ['apple', 'banana', 'cherry']; // 数组中的所有元素必须是 string 类型// 元组
let tuple: [string, number] = ['apple', 5]; // 元组中的第一个元素是 string 类型，第二个元素是 number 类型

区别：

元组可以存储不同类型的元素，而数组只能存储相同类型的元素。
数组的长度是动态变化的，而元组的长度是固定的。

4. 多维数组的声明

在一些应用场景中，数组的元素本身又是数组，这就形成了多维数组。TypeScript 中可以使用两种方式声明多维数组

// 使用类型标注声明二维数组
let matrix: number[][] = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];// 使用泛型数组声明二维数组
let matrix2: Array<Array<number>> = [[1, 2, 3],[4, 5, 6],[7, 8, 9]
];

解释：

number[][] 表示二维数组，其中每个元素都是一个 number 类型的数组。
Array<Array<number>> 表示一个 number 类型的二维数组。

优点：

简洁：类型[][] 语法简单，适用于基本的多维数组。
灵活性：使用泛型 Array<类型[]> 可以更清晰地表示数组的层级关系，特别适用于复杂的数据结构。

5. 与接口结合：数组元素为对象

在 TypeScript 中，数组元素不仅可以是基本类型，还可以是对象。我们可以通过接口来定义数组元素的结构，从而确保数组中每个元素都符合一定的结构。

interface Person {name: string;age: number;
}let people: Person[] = [{ name: 'Alice', age: 30 },{ name: 'Bob', age: 25 }
];// 使用泛型数组
let people2: Array<Person> = [{ name: 'Alice', age: 30 },{ name: 'Bob', age: 25 }
];

解释：