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.

Part 3 dari 24 ± 40 menit Gratis

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
ArrayTuple
PanjangBebasTetap (kecuali memakai rest)
Tipe elemenSama semuaBoleh beda tiap posisi
Contohnumber[][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)[].

Praktikkan langsung, gratis

Tulis dan jalankan kode langsung di browser, dapatkan penilaian otomatis. Daftar gratis kapan saja untuk menyimpan progres dan meraih sertifikat.

Coba latihan sekarang, tanpa daftar
Bagikan: WhatsApp Facebook LinkedIn X