TypeScript 数组：类型、对象数组、map 和 filter

TypeScript 的数组类型就是元素类型后面加上 []：string[] 是字符串数组，number[] 是数字数组。泛型写法 Array<string> 是同一个类型。数组一旦有了类型，你添加和读取的每个元素都具有这个类型。

const names: string[] = ["Ada", "Grace"];
const scores: Array<number> = [90, 85, 72]; // same as number[]

names.push("Alan");
// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type 'string'.
names.push(42);

const first: string = names[0];
const total = scores.reduce((sum, s) => sum + s, 0); // number

console.log(names, first, total);

@ts-expect-error 那一行是一个编译错误（TS2345）。这里把它标记为预期错误，代码块才能继续运行；而且类型在运行时会被擦除，所以 42 确实被添加进了数组，输出里能看到它。

string[] 与 Array<string>

一个代码库里选定一种风格即可。typescript-eslint 的 array-type 规则默认使用 T[]。

对象数组

用类型别名或接口描述元素，然后使用 Type[]。从数组中读出的所有内容都会按这个结构进行检查。

type User = { id: number; name: string; admin: boolean };

const users: User[] = [
    { id: 1, name: "Ada", admin: true },
    { id: 2, name: "Grace", admin: false },
    { id: 3, name: "Alan", admin: false },
];

users.push({ id: 4, name: "Linus", admin: false });

const admins = users.filter((u) => u.admin);       // User[]
const names = users.map((u) => u.name);            // string[]
const byId = users.find((u) => u.id === 2);        // User | undefined

console.log(admins.length, names);
console.log(byId?.name ?? "not found"); // Grace

添加到 users 中的对象字面量必须与 User 完全匹配：缺少 admin 或者属性名拼错都是编译错误。

带类型的 map、filter、reduce 和 find

数组方法都是泛型的，所以它们的结果也带有类型。每个方法在运行时做什么，在 JavaScript 的数组方法页面中讲解；类型是 TypeScript 额外加上的部分：

const prices = [4.5, 12, 8.25];

const labels = prices.map((p) => `$${p.toFixed(2)}`); // string[]
console.log(labels); // [ '$4.50', '$12.00', '$8.25' ]

const expensive = prices.find((p) => p > 100); // number | undefined
console.log(expensive ?? "none"); // none

// reduce's result type comes from the initial value,
// or from a type argument when the initial value is just {}
const byInitial = ["apple", "avocado", "banana"].reduce<Record<string, string[]>>(
    (acc, word) => {
        (acc[word[0]] ??= []).push(word);
        return acc;
    },
    {},
);
console.log(byInitial); // { a: [ 'apple', 'avocado' ], b: [ 'banana' ] }

// filter narrows when the callback is a type check
const raw = [1, undefined, 3, undefined];
const defined = raw.filter((n) => n !== undefined); // number[]
console.log(defined); // [ 1, 3 ]

最后一个例子之所以成立，是因为 TypeScript（从 5.5 起）能推断出 (n) => n !== undefined 是一个类型谓词，所以 filter 返回 number[]，而不是 (number | undefined)[]。对于它推断不出来的检查，自己写出谓词：filter((x): x is User => x !== null)。

包含多种类型的数组

联合类型作为元素类型时允许混合。数组类型的联合则不允许：

const mixed: (string | number)[] = [1, "two", 3]; // each element: string or number

let ids: string[] | number[] = [1, 2, 3]; // all numbers...
ids = ["a", "b"];                          // ...or all strings

// @ts-expect-error: (string | number)[] is not assignable to string[] | number[]
ids = [1, "b"];

for (const item of mixed) {
    // narrow each element before using type-specific methods
    console.log(typeof item === "string" ? item.toUpperCase() : item.toFixed(1));
}

如果每个位置的类型是固定的，比如 [name, age] 这样的一对值，就改用元组：[string, number] 知道索引 0 是字符串、索引 1 是数字，而 (string | number)[] 不知道。

只读数组

readonly T[] 去掉了所有会修改数组的方法。函数不应修改的参数和常量都可以用它。

// This does not compile: readonly arrays have no push.
function average(values: readonly number[]): number {
    values.push(0);
    return values.reduce((a, b) => a + b, 0) / values.length;
}

console.log(average([2, 4, 6]));

index.ts(3,12): error TS2339: Property 'push' does not exist on type 'readonly number[]'.

删掉 push 那一行，代码块就会打印 4。在需要 readonly number[] 的地方，总是可以传入可变的 number[]，所以只读参数不会给调用者带来任何成本。这个检查只在编译时进行：运行时它就是一个普通数组。要对只读数组排序，就排序它的副本：[...values].sort()。

字面量数组上 includes 的陷阱

as const 把数组变成由字面量类型组成的只读元组。用它表示允许值的列表很方便，但这样一来它的 includes 只接受这些字面量：

const COLORS = ["red", "green", "blue"] as const;
type Color = (typeof COLORS)[number]; // "red" | "green" | "blue"

function isColor(value: string): value is Color {
    // COLORS.includes(value) is error TS2345: 'string' is not assignable
    // to '"blue" | "green" | "red"'. Widen the array for the check:
    return (COLORS as readonly string[]).includes(value);
}

const input: string = "green";
if (isColor(input)) {
    const c: Color = input; // narrowed to Color
    console.log("valid color:", c);
}
console.log(isColor("purple")); // false

把检查包装进类型守卫（value is Color）意味着类型放宽只发生一次，调用者拿回的是一个已经收窄的值。

索引访问和空数组

读取 arr[i] 得到的类型是 T，即使 i 超出范围、运行时的值是 undefined 也一样。at(i) 的类型是 T | undefined，而编译选项 noUncheckedIndexedAccess 会让普通的索引访问也返回 T | undefined。

const queue: string[] = []; // annotate empty arrays

const head = queue[0];     // type string, value undefined
const last = queue.at(-1); // type string | undefined

console.log(head, last);            // undefined undefined
console.log(last?.toUpperCase());   // undefined, safely

queue[0].toUpperCase() 能通过编译，但运行时会抛出 TypeError。当索引可能不存在时，优先使用 at()、先检查长度，或者开启 noUncheckedIndexedAccess。