Mảng trong TypeScript: kiểu, mảng đối tượng, map và filter

Kiểu mảng (array) trong TypeScript là kiểu phần tử theo sau bởi []: string[] là mảng chuỗi, number[] là mảng số. Cách viết generic Array<string> là cùng một kiểu. Khi mảng đã có kiểu, mọi phần tử bạn thêm vào và mọi phần tử bạn đọc ra đều mang kiểu đó.

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);

Dòng @ts-expect-error là lỗi biên dịch (TS2345). Ở đây nó được đánh dấu là lỗi mong đợi để khối code vẫn chạy được, và vì kiểu bị xóa khi chạy, 42 thật sự được thêm vào lúc runtime: đầu ra cho thấy điều đó.

string[] và Array<string>

Hãy chọn một phong cách cho cả codebase. Quy tắc array-type của typescript-eslint mặc định dùng T[].

Mảng đối tượng

Mô tả phần tử bằng một type alias hoặc interface, rồi dùng Type[]. Mọi thứ đọc ra từ mảng đều được kiểm tra theo cấu trúc đó.

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

Một object literal thêm vào users phải khớp chính xác với User: thiếu admin hoặc viết sai tên thuộc tính đều là lỗi biên dịch.

map, filter, reduce và find có kiểu

Các phương thức của mảng là generic, nên kết quả của chúng mang kiểu. Mỗi phương thức làm gì lúc runtime đã có ở trang phương thức mảng của JavaScript; phần kiểu là thứ TypeScript bổ sung:

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 ]

Ví dụ cuối chạy được vì TypeScript (từ bản 5.5) suy luận rằng (n) => n !== undefined là một type predicate, nên filter trả về number[] thay vì (number | undefined)[]. Với những phép kiểm tra nó không suy luận được, hãy tự viết predicate: filter((x): x is User => x !== null).

Mảng chứa nhiều hơn một kiểu

Kiểu phần tử là union cho phép trộn lẫn. Union của các kiểu mảng thì không:

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));
}

Khi mỗi vị trí có kiểu cố định, như cặp [name, age], hãy dùng tuple: [string, number] biết chỉ số 0 là chuỗi và chỉ số 1 là số, còn (string | number)[] thì không.

Mảng readonly

readonly T[] loại bỏ mọi phương thức làm thay đổi mảng. Dùng nó cho tham số mà hàm không được thay đổi, và cho hằng số.

// 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[]'.

Xóa dòng push đi và khối code in ra 4. Một number[] có thể thay đổi luôn truyền được vào chỗ cần readonly number[], nên tham số readonly không gây bất tiện gì cho nơi gọi. Phép kiểm tra chỉ có lúc biên dịch: lúc runtime nó là một mảng bình thường. Để sắp xếp một mảng readonly, hãy sắp xếp bản sao: [...values].sort().

Cái bẫy includes với mảng literal

as const biến một mảng thành tuple readonly gồm các kiểu literal. Điều này hữu ích cho danh sách giá trị cho phép, nhưng khi đó includes của nó chỉ nhận đúng các literal ấy:

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

Bọc phép kiểm tra trong một type guard (value is Color) nghĩa là việc mở rộng kiểu chỉ xảy ra một lần, và nơi gọi nhận lại một giá trị đã được thu hẹp.

Truy cập theo chỉ số và mảng rỗng

Đọc arr[i] cho kiểu T, kể cả khi i nằm ngoài phạm vi và giá trị lúc runtime là undefined. at(i) có kiểu T | undefined, và tùy chọn trình biên dịch noUncheckedIndexedAccess cũng khiến việc truy cập chỉ số thông thường trả về 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() vẫn biên dịch được nhưng sẽ ném TypeError lúc runtime. Hãy ưu tiên at(), kiểm tra độ dài, hoặc noUncheckedIndexedAccess khi một chỉ số có thể không tồn tại.