Array & Tuple
Menulis tipe array (number[] dan Array<T>), array dua dimensi, readonly array, serta tuple: array dengan jumlah dan tipe elemen yang pasti, termasuk label dan elemen opsional.
Array bertipe
Array menyimpan banyak nilai berurutan. Di TypeScript, kamu menyatakan tipe isi array-nya, dengan dua cara penulisan yang artinya sama:
const skor: number[] = [80, 90, 75]
const nama: Array<string> = ["Ani", "Budi"] // sintaks generics (dibahas bab 13)
Gaya tipe[] lebih umum dipakai. Setelah tipe isi ditetapkan, TypeScript menjaga agar tidak ada nilai asing yang masuk:
skor.push(100) // ✅
skor.push("seratus") // ❌ Argument of type 'string' is not assignable to parameter of type 'number'
const pertama = skor[0] // tipe: number
const hurufBesar = nama.map((n) => n.toUpperCase()) // string[] — tipe n disimpulkan otomatis
Metode seperti map, filter, find, reduce sudah "tahu" tipe isi array, jadi parameter callback-nya terisi tipe otomatis — kamu tidak perlu menulisnya.
Array kosong: jangan lupa tipenya
const kosong = [] // dianggap any[] / never[] — rawan salah
const daftar: string[] = [] // ✅ jelas
Array dua dimensi dan array campuran
const papan: number[][] = [
[1, 2, 3],
[4, 5, 6],
]
const campur: (string | number)[] = ["a", 1, "b", 2] // kurung wajib!
Hati-hati: string | number[] berarti "string atau array angka", bukan array campuran. Pakai kurung: (string | number)[].
readonly array
Jika array tidak boleh diubah, tandai readonly. Metode yang mengubah isi (push, pop, ...) otomatis hilang.
const hari: readonly string[] = ["Senin", "Selasa"]
hari.push("Rabu") // ❌ Property 'push' does not exist on type 'readonly string[]'
const salinan = [...hari, "Rabu"] // ✅ buat array baru
Tuple: array dengan bentuk pasti
Tuple adalah array dengan jumlah elemen tetap dan tipe tiap posisi yang berbeda-beda. Cocok untuk pasangan nilai kecil, misalnya koordinat atau (nama, nilai).
const titik: [number, number] = [10, 20]
const siswa: [string, number] = ["Dewi", 88]
const nama = siswa[0] // string
const nilai = siswa[1] // number
siswa[2] // ❌ Tuple type '[string, number]' of length '2' has no element at index '2'
const salah: [string, number] = [88, "Dewi"] // ❌ urutan tipe terbalik
Destructuring dan label
const [namaSiswa, nilaiSiswa] = siswa // tipe tiap variabel ikut otomatis
// Label membuat tuple lebih mudah dibaca (tidak mengubah perilaku)
type Rentang = [awal: number, akhir: number]
type Pengguna = [id: number, nama: string, aktif?: boolean] // elemen opsional dengan ?
Tuple di dunia nyata
Fungsi yang mengembalikan dua nilai sering memakai tuple — contohnya hook useState di React mengembalikan [nilai, fungsiPengubah]:
function bagi(a: number, b: number): [number, number] {
return [Math.floor(a / b), a % b]
}
const [hasil, sisa] = bagi(17, 5) // hasil = 3, sisa = 2
| Array | Tuple | |
|---|---|---|
| Panjang | Bebas | Tetap (kecuali memakai rest) |
| Tipe elemen | Sama semua | Boleh beda tiap posisi |
| Contoh | number[] | [string, number] |
Kesalahan umum pemula
- Memakai tuple untuk data yang panjangnya bervariasi — gunakan array biasa.
- Memakai tuple untuk data yang punya banyak kolom bermakna — lebih baik object dengan nama properti (bab 4).
- Menulis
string | number[]padahal maksudnya(string | number)[].