Array TypeScript: Tipe, Array of Object, map dan filter

Tipe array di TypeScript adalah tipe elemennya diikuti []: string[] adalah array berisi string, number[] array berisi angka. Cara penulisan generic Array<string> adalah tipe yang sama. Setelah sebuah array diberi tipe, setiap elemen yang kamu tambahkan dan setiap elemen yang kamu baca punya tipe itu.

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

Baris @ts-expect-error adalah error kompilasi (TS2345). Di sini baris itu ditandai sebagai error yang diharapkan supaya bloknya tetap berjalan, dan karena tipe dihapus saat kompilasi, 42 benar-benar dimasukkan saat runtime: output-nya memperlihatkan hal itu.

string[] vs Array<string>

Pilih satu gaya untuk satu codebase. Aturan array-type dari typescript-eslint secara default memakai T[].

Array of Object

Deskripsikan elemennya dengan type alias atau interface, lalu pakai Type[]. Semua yang dibaca dari array itu diperiksa terhadap bentuk tersebut.

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

Object literal yang dimasukkan ke users harus cocok persis dengan User: admin yang tidak ada atau property yang salah ketik adalah error kompilasi.

map, filter, reduce, dan find yang Bertipe

Method array bersifat generic, jadi hasilnya membawa tipe. Apa yang dilakukan setiap method saat runtime dibahas di halaman method array JavaScript; tipenya adalah tambahan dari 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 ]

Contoh terakhir berhasil karena TypeScript (sejak 5.5) menyimpulkan bahwa (n) => n !== undefined adalah type predicate, sehingga filter mengembalikan number[], bukan (number | undefined)[]. Untuk pemeriksaan yang tidak bisa disimpulkan, tulis predicate-nya sendiri: filter((x): x is User => x !== null).

Array yang Menampung Lebih dari Satu Tipe

Tipe elemen union mengizinkan campuran. Union dari tipe array tidak:

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

Kalau setiap posisi punya tipe yang tetap, seperti pasangan [name, age], pakai tuple: [string, number] tahu bahwa index 0 adalah string dan index 1 adalah number, sedangkan (string | number)[] tidak tahu.

Array Readonly

readonly T[] menghilangkan setiap method yang mengubah array. Pakai untuk parameter yang tidak boleh diubah oleh fungsi, dan untuk konstanta.

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

Hapus baris push dan blok itu mencetak 4. number[] yang bisa diubah selalu boleh dikirim ke tempat yang mengharapkan readonly number[], jadi parameter readonly tidak merugikan pemanggil sama sekali. Pemeriksaan ini hanya saat kompilasi: saat runtime, nilainya array biasa. Untuk mengurutkan array readonly, urutkan salinannya: [...values].sort().

Jebakan includes pada Array Literal

as const mengubah array menjadi tuple readonly berisi tipe literal. Itu berguna untuk daftar nilai yang diizinkan, tetapi includes-nya lalu hanya menerima literal tersebut:

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

Membungkus pemeriksaan itu dalam type guard (value is Color) berarti pelebaran tipe cukup dilakukan sekali, dan pemanggil mendapatkan kembali nilai yang sudah dipersempit.

Index dan Array Kosong

Membaca arr[i] menghasilkan tipe T, bahkan ketika i di luar jangkauan dan nilai runtime-nya undefined. at(i) bertipe T | undefined, dan opsi compiler noUncheckedIndexedAccess membuat akses index biasa juga mengembalikan 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() akan lolos kompilasi lalu melempar TypeError saat runtime. Pilih at(), pemeriksaan panjang array, atau noUncheckedIndexedAccess kalau sebuah index mungkin tidak ada.