数组与元组 - 元素码农

发布时间: 2025-03-31 09:20

↑

# 数组与元组

TypeScript提供了强大的数组类型支持，同时引入了元组这一特殊的数组类型。本文将详细介绍如何在TypeScript中使用数组和元组。

## 数组类型

### 基本数组类型声明

```typescript
// 使用类型后缀[]声明
let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ["hello", "world"];

// 使用泛型数组类型
let genericNumbers: Array<number> = [1, 2, 3, 4, 5];
let genericStrings: Array<string> = ["hello", "world"];

// 混合类型数组
let mixed: (string | number)[] = [1, "two", 3, "four"];
let genericMixed: Array<string | number> = [1, "two", 3, "four"];
```

### 只读数组

```typescript
// 使用ReadonlyArray<T>
let readOnlyNumbers: ReadonlyArray<number> = [1, 2, 3];
// readOnlyNumbers[0] = 4; // 错误：数组是只读的

// 使用readonly修饰符
let constNumbers: readonly number[] = [1, 2, 3];
// constNumbers.push(4); // 错误：属性'push'不存在于'readonly number[]'类型上
```

### 数组方法

```typescript
// 常用数组方法的类型安全使用
let fruits: string[] = ["apple", "banana", "orange"];

// push方法
fruits.push("grape"); // 正确
// fruits.push(42); // 错误：类型'number'的参数不能赋给类型'string'的参数

// map方法
let lengths: number[] = fruits.map(fruit => fruit.length);

// filter方法
let longFruits: string[] = fruits.filter(fruit => fruit.length > 5);

// reduce方法
let allFruits: string = fruits.reduce((acc, curr) => acc + ", " + curr);
```

## 元组类型

### 基本元组声明

```typescript
// 声明一个元组类型
let tuple: [string, number] = ["hello", 42];

// 访问元组元素
console.log(tuple[0].substring(1)); // "ello"
console.log(tuple[1].toFixed(2));   // "42.00"

// 错误示例
// let wrongTuple: [string, number] = [42, "hello"]; // 错误：类型不匹配
```

### 可选元素

```typescript
// 带有可选元素的元组
let optionalTuple: [string, number?] = ["hello"];
optionalTuple = ["world", 42]; // 也可以

// 带有多个可选元素
let multiOptional: [string, number?, boolean?] = ["test"];
multiOptional = ["test", 42];
multiOptional = ["test", 42, true];
```

### 剩余元素

```typescript
// 使用剩余元素
let restTuple: [number, ...string[]] = [1, "hello", "world", "typescript"];

// 混合使用可选和剩余元素
let mixedTuple: [string, number?, ...boolean[]] = ["hello"];
mixedTuple = ["hello", 42];
mixedTuple = ["hello", 42, true, false, true];
```

### 只读元组

```typescript
// 创建只读元组
let readOnlyTuple: readonly [string, number] = ["hello", 42];
// readOnlyTuple[0] = "world"; // 错误：无法分配到'0'，因为它是只读属性
```

## 高级用法

### 元组类型推断

```typescript
// 使用const断言进行元组类型推断
let inferredTuple = ["hello", 42] as const;
// inferredTuple[0] = "world"; // 错误：无法分配到'0'，因为它是只读属性

// 函数返回元组
function getCoordinates(): [number, number] {
    return [10, 20];
}

let [x, y] = getCoordinates();
```

### 元组与解构

```typescript
// 数组解构
let tuple: [string, number, boolean] = ["hello", 42, true];
let [greeting, answer, isTrue] = tuple;

// 忽略某些元素
let [first, , third] = tuple;

// 结合剩余参数
let [head, ...tail] = tuple;
```

## 最佳实践

1. **选择合适的数组类型声明方式**：
```typescript
// 简单类型使用[]语法
let numbers: number[] = [1, 2, 3];

// 复杂类型使用Array<T>语法
let userArray: Array<{ id: number; name: string }> = [
    { id: 1, name: "John" },
    { id: 2, name: "Jane" }
];
```

2. **使用只读数组防止修改**：
```typescript
// 对不应修改的数组使用readonly
function processNumbers(arr: readonly number[]) {
    // arr.push(4); // 错误：防止意外修改
    return arr.map(n => n * 2);
}
```

3. **合理使用元组**：
```typescript
// 用于表示固定长度和类型的数据结构
type Point = [number, number];
type RGB = [number, number, number];

function createPoint(x: number, y: number): Point {
    return [x, y];
}
```

## 常见问题

1. **类型推断问题**：
```typescript
// 问题
let numbers = [1, 2, 3]; // 类型推断为number[]
let mixed = [1, "two"]; // 类型推断为(string | number)[]

// 解决方案：使用显式类型注解或as const
let tuple = [1, "two"] as const; // 推断为readonly [1, "two"]
```

2. **数组越界访问**：
```typescript
// TypeScript会检查元组越界访问
let pair: [string, number] = ["hello", 42];
// console.log(pair[2]); // 错误：索引'2'超出范围
```

## 下一步

掌握了数组和元组的基础用法后，你可以：

1. 学习更多数组操作方法
2. 探索泛型数组的高级用法
3. 实践元组在实际项目中的应用
4. 了解数组类型和接口的结合使用

通过合理使用数组和元组，你可以更好地组织和管理数据结构，提高代码的类型安全性。