Array & Tuple — TypeScript

Array — kumpulan elemen dengan tipe yang sama: let angka: number[] = [1, 2, 3]; let nama: Array = ["Budi", "Ani"]; // alternatif syntax Tuple — array dengan…

Array di TypeScript diberi type sesuai isinya: string[] artinya array yang semua isinya teks, berapa pun jumlahnya. Tuple adalah array yang jumlah isinya tetap, dan tiap posisi punya type sendiri, misalnya [string, number] untuk pasangan nama dan umur. Bayangin playlist dan baris di tabel absensi. Playlist isinya sejenis, semuanya lagu, dan bisa terus ditambah. Baris absensi selalu punya kolom yang sama dengan urutan tetap: kolom pertama nama, kolom kedua umur.

🧪 Tebakan cepat: buah bertipe string[] dan berisi 3 buah, index 0 sampai 2. Kalau kamu menulis buah[3], TypeScript menolaknya atau membiarkannya? Tebak dulu, jawabannya ada di bagian "Tuple: jumlah dan urutan tetap".

Array: daftar yang isinya sejenis

let buah: string[] = ["apel", "jeruk", "mangga"];
let nilai: number[] = [1, 2, 3];
let nama: Array<string> = ["Budi", "Ani"];

buah.push("pisang"); // boleh
buah.push(5);

string[] dibaca "array of string": tiap isinya teks. number[] tiap isinya angka.
Array<string> adalah cara tulis lain untuk string[], artinya sama persis. Yang lebih sering dipakai string[].
buah.push(5) ditolak: Argument of type 'number' is not assignable to parameter of type 'string'. ts(2345). Array teks gak boleh kemasukan angka.
buah[0] bertipe string, karena semua isi buah teks.

Mengambil isi pertama di function

function ambilPertama(arr: string[]): string {
  return arr[0];
}

console.log(ambilPertama(["x", "y", "z"])); // x
console.log(ambilPertama(buah));            // apel

arr: string[]: parameternya array teks.
): string: yang dikembalikan satu teks, bukan array.
arr[0] mengambil isi paling depan dari array yang dikirim ke function, apa pun isinya. Jangan tulis buah[0] di dalam function, karena hasilnya selalu "apel".

Tuple: jumlah dan urutan tetap

let profil: [string, number] = ["Budi", 17];

let namaSiswa = profil[0]; // string
let umur = profil[1];      // number
let lain = profil[2];
profil = [17, "Budi"];

[string, number] artinya tepat 2 isi: posisi 0 teks, posisi 1 angka. TypeScript tahu profil[0] itu string dan profil[1] itu number.
profil[2] ditolak: Tuple type '[string, number]' of length '2' has no element at index '2'. ts(2493).
profil = [17, "Budi"] ditolak dua kali, satu per posisi: Type 'number' is not assignable to type 'string'. dan Type 'string' is not assignable to type 'number'. Urutannya ikut dicek.

Array biasa beda. buah[3] lolos, type-nya tetap string, padahal waktu jalan isinya undefined, karena array biasa gak tahu panjangnya. Itu jawaban tebakannya: cuma tuple yang tahu jumlah isinya.

readonly: boleh dibaca, gak boleh diubah

const WARNA: readonly string[] = ["merah", "biru"];

WARNA[0];                       // boleh dibaca: "merah"
WARNA.map((w) => w + "!");      // boleh, hasilnya array baru
WARNA.push("hijau");
WARNA[0] = "hitam";

WARNA.push("hijau") ditolak: Property 'push' does not exist on type 'readonly string[]'. ts(2339). Method yang mengubah array (push, pop, sort) gak tersedia.
WARNA[0] = "hitam" ditolak: Index signature in type 'readonly string[]' only permits reading. ts(2542).
readonly cuma dicek TypeScript. Di JavaScript hasil compile kata itu hilang, jadi kalau kode yang error tetap dijalankan, array-nya benar-benar berubah.

const dan readonly beda: const melarang variabelnya diisi array lain, readonly melarang isi array-nya diubah.

⚠️ Jebakan yang sering ketemu

[string] bukan string[]. [string] itu tuple berisi tepat satu teks. let buah: [string] = ["apel", "jeruk", "mangga"] ditolak dengan Source has 3 element(s) but target allows only 1.
Tuple masih bisa di-push. profil.push(99) lolos, walau tuple-nya cuma 2 isi. Jumlah isi dicek waktu tuple diisi dan waktu index dibaca, bukan waktu push. Mau benar-benar terkunci? Pakai readonly [string, number].
Menyebut array di luar function. ambilPertama diuji dengan array lain, misalnya ["merah", "biru"] harus menghasilkan "merah". Pakai parameter arr, bukan buah.
Isi atau urutan beda. buah dinilai persis ["apel", "jeruk", "mangga"]: tiga teks huruf kecil, dengan urutan itu.

TL;DR: Array diberi type string[], number[], atau Array<string>: isinya sejenis, jumlahnya bebas, dan isi type lain ditolak (ts(2345)). Tuple [string, number] punya jumlah isi tetap dan type per posisi: index di luar panjangnya ditolak (ts(2493)), sedangkan array biasa membiarkan buah[3] lolos sebagai undefined. readonly string[] boleh dibaca dan di-map, tapi push dan mengganti isi ditolak, dan cuma dicek sebelum jalan. Isi pertama array yang dikirim ke function: return arr[0];.