请解释 TypeScript 中的 ReadonlyArray<T> 的作用和用法

推荐答案

ReadonlyArray<T> 是 TypeScript 中的一种内置类型，用于表示一个不可变的数组。与普通的数组类型 Array<T> 不同，ReadonlyArray<T> 不允许对数组进行修改操作，例如 push、pop、splice 等。它主要用于确保数组在创建后不会被意外修改，从而提高代码的安全性和可维护性。

用法示例

const numbers: ReadonlyArray<number> = [1, 2, 3, 4];

// 以下操作会导致编译错误
numbers.push(5); // Error: Property 'push' does not exist on type 'ReadonlyArray<number>'.
numbers[0] = 10; // Error: Index signature in type 'readonly number[]' only permits reading.

常用方法

ReadonlyArray<T> 保留了数组的只读方法，例如 map、filter、reduce 等，这些方法不会修改原数组，而是返回一个新的数组。

const doubled = numbers.map(x => x * 2); // [2, 4, 6, 8]

本题详细解读

1. ReadonlyArray<T> 的作用

ReadonlyArray<T> 的主要作用是提供一种不可变的数组类型，确保数组在创建后不会被修改。这在函数式编程中非常有用，因为它可以防止副作用的发生，确保数据的不可变性。

2. ReadonlyArray<T> 与 Array<T> 的区别

• 可变性：Array<T> 是可变的，允许对数组进行增删改操作；而 ReadonlyArray<T> 是不可变的，不允许对数组进行任何修改操作。
• 类型安全：使用 ReadonlyArray<T> 可以在编译时捕获对数组的修改操作，从而避免运行时错误。

3. 如何将 Array<T> 转换为 ReadonlyArray<T>

可以通过类型断言或使用 Readonly 工具类型将普通数组转换为 ReadonlyArray<T>。

const mutableArray: number[] = [1, 2, 3];
const readonlyArray: ReadonlyArray<number> = mutableArray as ReadonlyArray<number>;

// 或者使用 Readonly 工具类型
const readonlyArray2: Readonly<number[]> = mutableArray;

4. 如何将 ReadonlyArray<T> 转换为 Array<T>

如果需要修改 ReadonlyArray<T>，可以将其转换为普通的 Array<T>。

const readonlyArray: ReadonlyArray<number> = [1, 2, 3];
const mutableArray: number[] = [...readonlyArray]; // 使用展开运算符创建新数组
mutableArray.push(4); // 现在可以修改数组

5. 使用场景

• 函数参数：当函数不需要修改传入的数组时，可以使用 ReadonlyArray<T> 作为参数类型，以确保数组不会被修改。
• 状态管理：在状态管理中，使用 ReadonlyArray<T> 可以确保状态不会被意外修改，从而提高应用的可预测性。

function processNumbers(numbers: ReadonlyArray<number>) {
    // 只能读取数组，不能修改
    return numbers.map(x => x * 2);
}