TypeScript Array(数组)（实战指南）

TypeScript Array(数组)：从入门到精通的实用指南

在前端开发的世界里，数据的组织与处理是日常工作的核心。无论是从接口获取用户列表，还是在前端页面中展示商品数据，我们都需要一种高效、安全的方式来管理一组值。而 TypeScript Array(数组) 正是解决这一问题的利器。

数组，就像一个透明的盒子，可以装下多个相同或不同类型的数据。在 JavaScript 中，数组的功能已经非常强大，但一旦我们引入 TypeScript，它就不再是“普通盒子”——它拥有了类型检查的“智能锁”，能提前发现潜在错误，让代码更健壮、更易维护。

本文将带你一步步掌握 TypeScript Array(数组) 的核心用法，从基础创建到高级操作，结合真实场景案例，帮你建立扎实的数组使用能力。

创建数组与初始化

在 TypeScript 中，创建数组有多种方式，最常见的是使用数组字面量和泛型语法。

// 方式一：使用数组字面量（推荐）
const fruits: string[] = ['苹果', '香蕉', '橙子'];

// 方式二：使用泛型语法
const numbers: Array<number> = [1, 2, 3, 4, 5];

// 方式三：声明变量后赋值
let colors: string[] = [];
colors = ['红色', '绿色', '蓝色'];

注意：string[] 和 Array<string> 在功能上完全等价，但前者更简洁，是社区主流写法。

为什么需要类型声明？
想象一下，你在做一个电商项目，用户点击“添加商品”按钮时，系统要记录商品名称。如果没有类型声明，你可能不小心把一个数字 123 当作商品名传进去。而有了 string[] 类型，TypeScript 会在编译阶段就提醒你：“你传了个数字，这不符合预期！”

数组的常用操作方法

TypeScript 数组继承了 JavaScript 的所有原生方法，同时在类型层面提供了更强的保护。下面是一些最常用的数组方法，配合实际例子讲解。

添加与删除元素

const tasks: string[] = ['写日报', '开会', '写代码'];

// 向末尾添加元素
tasks.push('复盘');
console.log(tasks); // ['写日报', '开会', '写代码', '复盘']

// 从末尾移除元素
const lastTask = tasks.pop();
console.log(lastTask); // '复盘'
console.log(tasks); // ['写日报', '开会', '写代码']

// 从开头添加元素
tasks.unshift('准备材料');
console.log(tasks); // ['准备材料', '写日报', '开会', '写代码']

// 从开头移除元素
const firstTask = tasks.shift();
console.log(firstTask); // '准备材料'
console.log(tasks); // ['写日报', '开会', '写代码']

小贴士：push 和 unshift 会改变原数组，而 pop 和 shift 也一样。如果你不想修改原数组，可以考虑使用 concat 或 slice 方法。

查找与过滤数据

在实际项目中，查找特定数据是高频操作。比如在用户列表中找某个特定用户。

const users = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
  { id: 3, name: '王五', age: 28 }
];

// 查找第一个年龄大于 26 的用户
const olderUser = users.find(user => user.age > 26);
console.log(olderUser); // { id: 2, name: '李四', age: 30 }

// 筛选出所有年龄大于 25 的用户
const adults = users.filter(user => user.age > 25);
console.log(adults); // [{ id: 2, name: '李四', age: 30 }, { id: 3, name: '王五', age: 28 }]

类型提示：find 返回的是 T | undefined，因为可能找不到匹配项。所以使用时要记得判断是否存在，避免调用 undefined 的属性。

遍历与转换数据

当我们需要对数组中的每一项进行处理时，map 是最常用的工具。

const prices = [100, 200, 300];

// 将价格转换为带“元”单位的字符串
const priceLabels = prices.map(price => `${price} 元`);
console.log(priceLabels); // ['100 元', '200 元', '300 元']

// 或者：用箭头函数简化写法
const priceLabels2 = prices.map(p => `${p} 元`);

对比 forEach：forEach 用于执行副作用（如打印日志、发送请求），但不返回新数组。而 map 返回新数组，适合用于数据转换。

多维数组与嵌套结构

在复杂项目中，我们常需要处理多维数据。比如一个表格数据，或一个课程安排表。

// 二维数组：表示一个 3x3 的网格
const matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 访问第 2 行第 3 列的数据（注意索引从 0 开始）
console.log(matrix[1][2]); // 输出 6

// 遍历二维数组
matrix.forEach(row => {
  row.forEach(cell => {
    console.log(cell);
  });
});

类型写法：number[][] 表示“数组中的每一项都是一个 number 数组”。这种写法在处理表格、图像像素、矩阵运算时非常常见。

类型推断与泛型的深入理解

TypeScript 的类型推断能力非常强。很多时候，你不需要显式声明类型，它也能自动识别。

// 类型推断：TypeScript 自动推断为 string[]
const names = ['Alice', 'Bob', 'Charlie'];

// 等价于
const names2: string[] = ['Alice', 'Bob', 'Charlie'];

但当数据来源复杂时，显式声明就显得尤为重要。比如从 API 获取数据：

interface Product {
  id: number;
  name: string;
  price: number;
}

// 假设从接口返回的数据是任意类型
const rawData: any[] = [
  { id: 1, name: '耳机', price: 199 },
  { id: 2, name: '键盘', price: 399 }
];

// 使用类型断言明确类型
const products: Product[] = rawData as Product[];

// 或者使用类型守卫
function isProduct(item: any): item is Product {
  return item && typeof item.id === 'number' && typeof item.name === 'string';
}

const validProducts = rawData.filter(isProduct);

类型断言 vs 类型守卫：as 是强制转换，风险较高。而 isProduct 函数通过运行时判断，更安全，是推荐做法。

常见陷阱与最佳实践

在使用 TypeScript Array(数组) 时，新手常踩的坑包括：

1. 忽略 undefined 的情况

const items: string[] = [];

// ❌ 错误写法：可能报错
// console.log(items[0].toUpperCase());

// ✅ 正确写法：先判断是否存在
if (items.length > 0) {
  console.log(items[0].toUpperCase());
}

2. 混淆 push 与 concat

const arr1 = [1, 2];
const arr2 = [3, 4];

// push 会修改原数组
arr1.push(...arr2); // arr1 变成 [1, 2, 3, 4]

// concat 不会修改原数组，返回新数组
const newArr = arr1.concat(arr2); // arr1 仍是 [1, 2, 3, 4]

推荐：在函数式编程中，尽量使用 concat、map 等不修改原数组的方法，避免副作用。

3. 滥用 any[]

// ❌ 不推荐：失去类型安全
const data: any[] = ['a', 1, true];

// ✅ 推荐：使用更精确的类型
const data2: (string | number | boolean)[] = ['a', 1, true];

实际应用场景：用户权限管理

假设我们要实现一个用户权限系统，用户可以有多个角色，如管理员、编辑、访客。

type Role = 'admin' | 'editor' | 'visitor';

const userRoles: Role[] = ['admin', 'editor'];

// 检查用户是否有某个角色
function hasRole(roles: Role[], requiredRole: Role): boolean {
  return roles.includes(requiredRole);
}

console.log(hasRole(userRoles, 'admin')); // true
console.log(hasRole(userRoles, 'visitor')); // false

类型安全的体现：Role 是一个联合类型，只有 'admin'、'editor'、'visitor' 三种合法值。如果你写成 hasRole(userRoles, 'superuser')，TypeScript 会直接报错。

总结

TypeScript Array(数组) 不仅仅是一个数据容器，它是一个“带类型保险的工具箱”。从创建、操作到类型安全，它帮助我们在开发早期就发现错误，提升代码质量。

• 学会使用 string[]、number[] 等类型声明；
• 掌握 map、filter、find、reduce 等高阶函数；
• 警惕 undefined 和副作用，养成良好的编码习惯；
• 在复杂场景中合理使用泛型和类型守卫。

数组是数据处理的基础，掌握好它，你就能在 Vue 3.0、React 或 Node.js 项目中游刃有余。别再让“数组越界”或“类型错误”成为你代码中的定时炸弹。

多写、多练、多调试，相信你很快就能成为 TypeScript 数组的驾驭者。