TypeScript数组类型Array<T>的全面解析

TypeScript 数组类型 Array基础

在 TypeScript 中，Array<T> 是一种泛型类型，其中 T 代表数组中元素的类型。这种类型定义方式使得我们在处理数组时能够明确元素的类型，从而在开发过程中获得类型检查的优势。

简单定义

最常见的定义方式是使用 Array<T> 语法，例如：

let numbers: Array<number> = [1, 2, 3];
let strings: Array<string> = ['a', 'b', 'c'];

这里，numbers 数组只能包含 number 类型的元素，strings 数组只能包含 string 类型的元素。如果尝试向 numbers 数组中添加一个字符串，TypeScript 编译器会抛出错误：

numbers.push('four'); // 报错：类型“string”的参数不能赋给类型“number”的参数

另一种定义语法

除了 Array<T> 语法，TypeScript 还支持使用 T[] 的语法来定义数组类型，这两种方式是等价的。例如：

let numbers: number[] = [1, 2, 3];
let strings: string[] = ['a', 'b', 'c'];

这两种语法在功能上完全相同，选择哪种主要取决于个人编码习惯。在实际项目中，T[] 的写法更为简洁，因此更为常用。

多维数组

二维数组

在 TypeScript 中定义二维数组可以通过嵌套 Array<T> 或者 T[] 来实现。例如，要定义一个二维数组，其中每个元素都是 number 类型：

// 使用 Array<Array<number>> 语法
let matrix1: Array<Array<number>> = [
    [1, 2],
    [3, 4]
];
// 使用 number[][] 语法
let matrix2: number[][] = [
    [5, 6],
    [7, 8]
];

这两种方式都正确地定义了一个二维数组，其中每个子数组都包含 number 类型的元素。访问二维数组的元素时，需要使用两个索引，例如：

console.log(matrix1[0][1]); // 输出 2
console.log(matrix2[1][0]); // 输出 7

更高维度数组

同样的原理可以扩展到更高维度的数组。例如，三维数组可以这样定义：

// 使用 Array<Array<Array<number>>> 语法
let cube1: Array<Array<Array<number>>> = [
    [
        [1, 2],
        [3, 4]
    ],
    [
        [5, 6],
        [7, 8]
    ]
];
// 使用 number[][][] 语法
let cube2: number[][][] = [
    [
        [9, 10],
        [11, 12]
    ],
    [
        [13, 14],
        [15, 16]
    ]
];

访问三维数组的元素需要使用三个索引，例如：

console.log(cube1[0][1][0]); // 输出 3
console.log(cube2[1][0][1]); // 输出 14

联合类型数组

基本概念

有时候，数组中的元素可能具有多种类型，这时候可以使用联合类型来定义数组类型。例如，一个数组中可能同时包含 number 和 string 类型的元素：

let mixedArray: (number | string)[] = [1, 'two', 3];

在这个例子中，mixedArray 数组的元素类型是 number | string，即可以是 number 类型或者 string 类型。

注意事项

使用联合类型数组时，需要注意当访问数组元素时，因为元素类型不确定，可能需要进行类型检查。例如，假设我们想对 mixedArray 中的所有元素进行某种操作：

mixedArray.forEach((element) => {
    if (typeof element === 'number') {
        console.log(element.toFixed(2));
    } else {
        console.log(element.toUpperCase());
    }
});

这里通过 typeof 操作符来检查元素的类型，然后根据不同类型进行相应的操作。如果不进行类型检查，直接调用某个类型特有的方法，TypeScript 编译器可能会报错。

只读数组

定义方式

在 TypeScript 中，可以定义只读数组，即数组一旦初始化，其元素就不能被修改。定义只读数组可以使用 ReadonlyArray<T> 类型，例如：

let readonlyNumbers: ReadonlyArray<number> = [1, 2, 3];

或者使用 readonly T[] 语法：

let readonlyStrings: readonly string[] = ['a', 'b', 'c'];

这两种方式都定义了只读数组。试图修改只读数组的元素会导致编译错误：

readonlyNumbers[0] = 4; // 报错：无法分配到 "0" ，因为它是只读属性
readonlyStrings.push('d'); // 报错：属性“push”在类型“readonly string[]”上不存在

与普通数组的转换

虽然只读数组不能直接修改，但可以通过类型断言将其转换为普通数组来进行修改。不过这种操作需要谨慎使用，因为它绕过了 TypeScript 的类型安全机制。例如：

let readonlyNumbers: ReadonlyArray<number> = [1, 2, 3];
let mutableNumbers = readonlyNumbers as number[];
mutableNumbers[0] = 4;
console.log(mutableNumbers); // 输出 [4, 2, 3]

在实际项目中，只有在确保安全的情况下才应该进行这种类型转换，否则可能会引入难以调试的错误。

数组类型推断

自动推断

TypeScript 具有强大的类型推断能力，在定义数组时，如果提供了初始值，TypeScript 会自动推断数组的类型。例如：

let myArray = [1, 2, 3]; // myArray 被推断为 number[] 类型
let myStringArray = ['a', 'b', 'c']; // myStringArray 被推断为 string[] 类型

这种自动推断机制使得代码更加简洁，开发人员不需要显式地声明数组类型，TypeScript 编译器会根据初始值推断出正确的类型。

上下文推断

除了根据初始值推断，TypeScript 还能根据上下文来推断数组类型。例如，在函数调用中，如果函数参数期望一个特定类型的数组，TypeScript 会根据这个上下文来推断数组的类型。假设我们有一个函数 printNumbers，它接受一个 number 类型的数组作为参数：

function printNumbers(numbers: number[]) {
    numbers.forEach((number) => {
        console.log(number);
    });
}
let numbers = [1, 2, 3];
printNumbers(numbers); // numbers 被推断为 number[] 类型

在这个例子中，因为 printNumbers 函数期望一个 number[] 类型的参数，所以 numbers 数组被推断为 number[] 类型，即使没有显式声明。

数组方法与类型

常用方法类型

TypeScript 为数组的各种方法提供了精确的类型定义。例如，push 方法用于向数组末尾添加一个或多个元素，其类型定义如下：

let numbers: number[] = [1, 2, 3];
let length: number = numbers.push(4);
// length 的类型为 number ，因为 push 方法返回新的数组长度

pop 方法用于从数组末尾移除一个元素并返回该元素，其类型定义如下：

let numbers: number[] = [1, 2, 3];
let popped: number | undefined = numbers.pop();
// popped 的类型为 number | undefined ，因为数组可能为空

map 方法用于创建一个新数组，其元素是通过对原数组中的每个元素调用一个提供的函数得到的，其类型定义如下：

let numbers: number[] = [1, 2, 3];
let squared: number[] = numbers.map((number) => number * number);
// squared 的类型为 number[] ，因为 map 方法返回一个新的数组，其元素类型由回调函数的返回值决定

自定义回调函数类型

当使用数组的一些方法，如 map、filter、reduce 等，需要传入回调函数。在 TypeScript 中，可以显式定义回调函数的类型，以确保类型安全。例如，对于 map 方法：

let numbers: number[] = [1, 2, 3];
let callback: (number) => number = (num) => num * 2;
let doubled: number[] = numbers.map(callback);

在这个例子中，callback 函数被显式定义为接受一个 number 类型参数并返回一个 number 类型值的函数。这样可以避免在回调函数中出现类型错误，例如返回一个错误类型的值。

数组类型与接口

接口定义数组形状

在 TypeScript 中，可以使用接口来定义数组的形状。例如，假设我们需要一个数组，其元素是具有 id 和 name 属性的对象，可以这样定义接口：

interface User {
    id: number;
    name: string;
}
let users: User[] = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
];

这里，User 接口定义了数组元素的形状，users 数组只能包含符合 User 接口定义的对象。

接口继承与数组类型

接口可以继承其他接口，这在定义复杂数组类型时非常有用。例如，假设我们有一个基础的 Person 接口，然后定义一个 Employee 接口继承自 Person，并使用 Employee 接口来定义数组类型：

interface Person {
    name: string;
}
interface Employee extends Person {
    salary: number;
}
let employees: Employee[] = [
    { name: 'Alice', salary: 5000 },
    { name: 'Bob', salary: 6000 }
];

在这个例子中，Employee 接口继承了 Person 接口的 name 属性，并添加了 salary 属性。employees 数组中的元素必须符合 Employee 接口的定义。

数组类型与类型别名

类型别名定义数组类型

类型别名是给类型起一个新的名字，在定义数组类型时也非常有用。例如：

type NumberArray = number[];
let numbers: NumberArray = [1, 2, 3];

这里，NumberArray 是 number[] 的类型别名，使用 NumberArray 来定义数组类型与直接使用 number[] 效果相同，但可以使代码更具可读性，特别是在复杂类型的情况下。

联合类型别名与数组

类型别名可以与联合类型结合使用，来定义更复杂的数组类型。例如：

type NumberOrStringArray = (number | string)[];
let mixedArray: NumberOrStringArray = [1, 'two', 3];

在这个例子中，NumberOrStringArray 是一个联合类型别名，表示数组元素可以是 number 类型或者 string 类型。

数组类型在函数参数与返回值中的应用

作为函数参数

在函数定义中，可以将数组类型作为参数类型。例如，有一个函数用于计算数组中所有数字的总和：

function sum(numbers: number[]): number {
    return numbers.reduce((acc, num) => acc + num, 0);
}
let numbers: number[] = [1, 2, 3];
let total: number = sum(numbers);
console.log(total); // 输出 6

这里，sum 函数接受一个 number 类型的数组作为参数，并返回一个 number 类型的值。

作为函数返回值

函数也可以返回数组类型。例如，有一个函数用于生成指定范围内的数字数组：

function range(start: number, end: number): number[] {
    let result: number[] = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}
let numbers: number[] = range(1, 5);
console.log(numbers); // 输出 [1, 2, 3, 4]

在这个例子中，range 函数接受两个 number 类型的参数 start 和 end，返回一个 number 类型的数组。

数组类型的高级应用

数组类型与泛型函数

泛型函数可以接受不同类型的数组作为参数，并根据数组元素类型进行相应的操作。例如，有一个泛型函数用于打印数组中的每个元素：

function printArray<T>(array: T[]) {
    array.forEach((element) => {
        console.log(element);
    });
}
let numbers: number[] = [1, 2, 3];
let strings: string[] = ['a', 'b', 'c'];
printArray(numbers);
printArray(strings);

在这个例子中，printArray 是一个泛型函数，它接受一个 T[] 类型的数组作为参数，其中 T 可以是任何类型。这样，同一个函数可以处理不同类型的数组。

数组类型与条件类型

条件类型可以根据类型的条件来选择不同的类型。在数组类型中，条件类型也有一些有趣的应用。例如，假设我们有一个条件类型，根据数组元素类型是否为 string 来返回不同的类型：

type StringArrayOrNumber = <T>(arr: T[]) => T extends string ? string : number;
let func: StringArrayOrNumber = <T>(arr: T[]) => {
    if (typeof arr[0] ==='string') {
        return 'default string' as any;
    } else {
        return 0 as any;
    }
};
let stringArray: string[] = ['a', 'b'];
let numberArray: number[] = [1, 2];
let result1 = func(stringArray);
let result2 = func(numberArray);

在这个例子中，StringArrayOrNumber 是一个条件类型，根据传入数组的元素类型来返回不同的类型。虽然这个例子中的实际操作比较简单，但展示了条件类型在数组类型中的应用方式。

数组类型的类型守卫

自定义类型守卫函数

在处理联合类型数组时，类型守卫可以帮助我们在运行时确定数组元素的具体类型。可以定义自定义类型守卫函数，例如，假设我们有一个联合类型数组 (number | string)[]，我们可以定义一个类型守卫函数来检查数组元素是否为 number 类型：

function isNumberArrayElement(element: number | string): element is number {
    return typeof element === 'number';
}
let mixedArray: (number | string)[] = [1, 'two', 3];
let numbers: number[] = [];
mixedArray.forEach((element) => {
    if (isNumberArrayElement(element)) {
        numbers.push(element);
    }
});
console.log(numbers); // 输出 [1, 3]

在这个例子中，isNumberArrayElement 函数是一个类型守卫函数，它返回一个布尔值，并且使用 is 语法来告诉 TypeScript 编译器，如果函数返回 true，那么 element 就是 number 类型。

使用类型守卫与数组方法

类型守卫可以与数组的各种方法结合使用，以确保类型安全。例如，使用 filter 方法结合类型守卫来过滤出数组中的 number 类型元素：

function isNumberArrayElement(element: number | string): element is number {
    return typeof element === 'number';
}
let mixedArray: (number | string)[] = [1, 'two', 3];
let numbers: number[] = mixedArray.filter(isNumberArrayElement);
console.log(numbers); // 输出 [1, 3]

这里，filter 方法使用 isNumberArrayElement 类型守卫函数来过滤出 number 类型的元素，从而得到一个只包含 number 类型元素的数组。

数组类型与模块

在模块中使用数组类型

在 TypeScript 模块中，数组类型的使用与普通代码中的使用方式相同。例如，我们可以定义一个模块，其中包含一个函数，该函数接受一个数组作为参数并返回一个新的数组。假设我们有一个 arrayUtils 模块：

// arrayUtils.ts
export function doubleArray(numbers: number[]): number[] {
    return numbers.map((number) => number * 2);
}

在其他模块中，可以导入并使用这个函数：

// main.ts
import { doubleArray } from './arrayUtils';
let numbers: number[] = [1, 2, 3];
let doubledNumbers: number[] = doubleArray(numbers);
console.log(doubledNumbers); // 输出 [2, 4, 6]

在这个例子中，arrayUtils 模块导出了一个 doubleArray 函数，该函数接受一个 number 类型的数组并返回一个新的 number 类型的数组。main.ts 模块导入并使用了这个函数。

模块导出数组类型

模块不仅可以导出函数，还可以导出数组类型。例如，在 types.ts 模块中：

// types.ts
export type StringArray = string[];

在其他模块中，可以导入这个类型别名并使用：

// main.ts
import { StringArray } from './types';
let strings: StringArray = ['a', 'b', 'c'];

这样可以在不同模块之间共享数组类型定义，提高代码的复用性。

数组类型与 React

在 React 组件中使用数组类型

在 React 应用中，经常需要处理数组。例如，在一个展示列表的 React 组件中，我们可能需要定义一个数组来存储列表项的数据。假设我们有一个 ListItem 组件，它接受一个对象数组作为属性：

import React from'react';
interface ListItem {
    id: number;
    text: string;
}
const List: React.FC<{ items: ListItem[] }> = ({ items }) => {
    return (
        <ul>
            {items.map((item) => (
                <li key={item.id}>{item.text}</li>
            ))}
        </ul>
    );
};
const items: ListItem[] = [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' }
];
const App: React.FC = () => {
    return (
        <div>
            <List items={items} />
        </div>
    );
};
export default App;

在这个例子中，List 组件接受一个 ListItem[] 类型的 items 属性，通过 map 方法将每个 ListItem 对象渲染为一个列表项。

使用 React Hook 处理数组

React Hook 如 useState 也可以用于处理数组。例如，假设我们有一个组件，需要在状态中存储一个数字数组，并提供一个按钮来添加新的数字：

import React, { useState } from'react';
const NumberList: React.FC = () => {
    const [numbers, setNumbers] = useState<number[]>([]);
    const addNumber = () => {
        const newNumber = Math.floor(Math.random() * 10);
        setNumbers([...numbers, newNumber]);
    };
    return (
        <div>
            <button onClick={addNumber}>Add Number</button>
            <ul>
                {numbers.map((number) => (
                    <li key={number}>{number}</li>
                ))}
            </ul>
        </div>
    );
};
export default NumberList;

在这个例子中，useState Hook 用于管理 numbers 数组的状态。通过 setNumbers 函数，我们可以更新数组状态，例如添加新的数字。这里，numbers 数组的类型被显式声明为 number[]，以确保类型安全。

数组类型与 Vue

在 Vue 组件中使用数组类型

在 Vue 应用中，数组类型同样广泛应用。例如，在一个 Vue 组件中，我们可能需要定义一个数组来存储列表数据。假设我们有一个简单的 Vue 组件 ListItem.vue：

<template>
    <ul>
        <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
interface ListItem {
    id: number;
    text: string;
}
export default defineComponent({
    data() {
        return {
            items: [] as ListItem[]
        };
    },
    mounted() {
        this.items = [
            { id: 1, text: 'Item 1' },
            { id: 2, text: 'Item 2' }
        ];
    }
});
</script>

在这个例子中，items 数组被定义为 ListItem[] 类型，确保了数组元素的类型安全。v - for 指令用于遍历 items 数组并渲染列表项。

使用 Vuex 管理数组状态

在大型 Vue 应用中，通常会使用 Vuex 来管理状态。假设我们使用 Vuex 来管理一个购物车商品列表，商品列表是一个数组。首先，定义商品类型和 Vuex 的状态、mutation 等：

// types.ts
export interface Product {
    id: number;
    name: string;
    price: number;
}
// store.ts
import { defineStore } from 'pinia';
import { Product } from './types';
export const useCartStore = defineStore('cart', {
    state: () => ({
        products: [] as Product[]
    }),
    mutations: {
        addProduct(state, product: Product) {
            state.products.push(product);
        }
    }
});

在组件中，可以使用这个 Vuex 存储来管理购物车商品列表：

<template>
    <button @click="addProduct">Add Product</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useCartStore } from './store';
import { Product } from './types';
export default defineComponent({
    methods: {
        addProduct() {
            const newProduct: Product = { id: 1, name: 'Product 1', price: 10 };
            const cartStore = useCartStore();
            cartStore.addProduct(newProduct);
        }
    }
});
</script>

在这个例子中，products 数组在 Vuex 状态中被定义为 Product[] 类型，确保了购物车商品列表的数据类型安全。通过 Vuex 的 mutation 方法 addProduct，可以向购物车中添加新的商品。

通过以上全面的解析，我们对 TypeScript 中的数组类型 Array<T> 有了深入的理解，包括其基础定义、多维数组、联合类型、只读数组等各种特性，以及在不同场景如函数、接口、模块、React 和 Vue 中的应用。这将有助于我们在开发过程中更好地使用数组类型，提高代码的质量和可维护性。