Array dan Tuple

Data jarang berdiri sendiri, sehingga TypeScript menyediakan pengetikan untuk kumpulan nilai melalui array dan tuple. Topik ini membahas dua bentuk penulisan array, yaitu T[] dan Array<T>, kemudian tuple yang panjangnya dan tipe tiap posisinya bersifat tetap. Setelah membacanya, pemilihan bentuk pengetikan untuk daftar nilai maupun data terstruktur dapat dilakukan dengan tepat.

Mengetik array dengan T[]#

Penulisan T[] menyatakan array yang seluruh elemennya bertipe T, misalnya number[] untuk array angka dan string[] untuk array teks. Array yang dianotasi demikian diperiksa pada dua arah, yaitu nilai yang masuk dan hasil yang keluar. Penugasan elemen bertipe lain ditolak, dan hasil pembacaan elemen diperlakukan bertipe T.

Berkas berikut menghitung rata-rata nilai ujian dari sebuah array bertipe number[].

const nilaiUjian: number[] = [82, 90, 75, 88];
let jumlah: number = 0;

for (const nilai of nilaiUjian) {
  jumlah = jumlah + nilai;
}

const rataRata: number = jumlah / nilaiUjian.length;

console.log(nilaiUjian);
console.log(rataRata);

[ 82, 90, 75, 88 ]
83.75

Perulangan for...of mengunjungi setiap elemen sebagai number, sehingga penjumlahan dilakukan tanpa konversi apa pun. Properti length mengembalikan banyaknya elemen dan dipakai langsung sebagai pembagi rata-rata. Apabila salah satu elemen ditulis sebagai teks, misalnya "80", error muncul tepat pada elemen tersebut.

Array yang isinya memang campuran ditangani dengan gabungan tipe (union) pada elemennya, misalnya (string | number)[] untuk array yang boleh memuat keduanya. Setiap elemen yang dibaca dari array tersebut kemudian bertipe union pula, sehingga pemakaiannya juga perlu penyesuaian. Aturan ini menjaga keandalan array pada dua arah, yaitu saat mengisi dan saat membaca. Deklarasi yang isinya sering berubah sebaiknya tetap homogen, karena union pada elemen menambah beban pemeriksaan di setiap pemakaian.

Bentuk generik Array#

Bentuk Array<T> menyatakan hal yang sama dengan T[], hanya ditulis dengan kurung sudut seperti parameter generik. Keduanya dapat dipakai bergantian tanpa perbedaan perilaku, sehingga pilihannya adalah perkara keterbacaan. Bentuk kurung sudut lebih mudah dibaca ketika tipe elemennya sendiri panjang, misalnya Array<string | number>, sedangkan T[] lebih ringkas untuk tipe sederhana.

const daftarHadir: Array<string> = ["Ali", "Budi", "Citra"];
const matriksSatuBaris: number[][] = [[1, 2], [3, 4]];

console.log(daftarHadir.length);
console.log(matriksSatuBaris);

3
[ [ 1, 2 ], [ 3, 4 ] ]

Konstanta matriksSatuBaris memakai number[][], yaitu array yang elemennya juga array angka. Bentuk bersarang seperti ini setara dengan Array<Array<number>>, tetapi versi kurung siku lebih umum dipakai. Tidak ada perbedaan perilaku antara kedua penulisan, karena keduanya menghasilkan tipe yang identik.

Tuple untuk data berbentuk tetap#

Tuple adalah array dengan panjang tetap dan tipe yang ditentukan per posisi. Penulisan [string, number] menyatakan array dengan tepat dua elemen, yaitu string pada posisi pertama dan number pada posisi kedua. Bentuk ini cocok untuk data terstruktur kecil yang posisinya bermakna, misalnya pasangan label dan hasil pengukuran.

const catatan: [string, number] = ["Sensor ruang server", 26.5];

const label: string = catatan[0];
const suhu: number = catatan[1];

console.log(label);
console.log(suhu);
console.log(catatan.length);

Sensor ruang server
26.5
2

Akses catatan[0] diketahui compiler sebagai string dan catatan[1] sebagai number, karena tipe melekat pada posisi. Properti length tetap mengembalikan angka, tetapi nilainya sudah diketahui compiler sejak awal, yaitu tepat 2. Apabila data memuat lebih banyak kolom, objek dengan properti bernama lebih mudah dibaca daripada posisi angka.

Bentuk tetap tuple juga memudahkan penguraian nilai, yaitu pengambilan isi array langsung ke beberapa variabel. Pola const [label, suhu] = catatan mengambil kedua posisi sekaligus, dan tipe tiap variabel yang dihasilkan mengikuti posisi masing-masing. Pemakaian nama variabel yang bermakna menggantikan kebutuhan mengingat urutan indeks. Kebiasaan ini membuat kode tetap terbaca tanpa menyebut indeks berulang kali.

Pemeriksaan panjang tuple#

Karena panjangnya bagian dari tipe, tuple yang berisi elemen lebih banyak atau lebih sedikit dari deklarasinya ditolak. Kesalahan ini tertangkap pada saat pemeriksaan tipe, jauh sebelum program dijalankan. Berkas berikut sengaja memuat tuple dengan elemen berlebih untuk menunjukkan pesannya.

// tidak-dijalankan
const koordinat: [number, number] = [1, 2, 3];

# menampilkan pesan error tanpa mengeksekusi berkas
tsc --noEmit tuple-salah.ts

tuple-salah.ts(2,7): error TS2322: Type '[number, number, number]' is not assignable to type '[number, number]'.
  Source has 3 element(s) but target allows only 2.

Pesan error menyatakan sumber memiliki tiga elemen, sedangkan target hanya mengizinkan dua. Baris kedua pesan adalah catatan penjelasan yang menegaskan hitungan elemen tersebut. Pemeriksaan yang sama berlaku untuk akses pada indeks yang tidak ada, misalnya koordinat[2], yang dilaporkan dengan kode TS2493 beserta panjang tuple dan indeks yang ditanyakan.

Kesalahan umum#

Kesalahan berikut muncul ketika perbedaan array biasa dan tuple belum terpatri.

• Menganggap tuple dan array biasa dapat saling menggantikan. Penugasan array number[] ke tuple [number, number] ditolak karena panjangnya tidak dijamin. Tuple hanya untuk data yang bentuknya memang tetap.
• Menambah elemen lewat push pada tuple. Compiler menerima catatan.push(30), tetapi akses posisi ketiganya tetap ditolak karena tipe tuple tidak berubah. Struktur yang bisa bertambah sebaiknya dimodelkan sebagai array biasa.
• Membuat array kosong tanpa anotasi. Deklarasi const daftar: string[] = [] menyatakan maksud sejak awal, sedangkan const daftar = [] menyisakan tipe yang baru terbentuk dari pemakaiannya. Anotasi pada array kosong berbiaya kecil dan menghindarkan kebingungan.

Ringkasan#

• T[] dan Array<T> menyatakan array yang seluruh elemennya bertipe T, dan keduanya menghasilkan tipe yang identik.
• Tuple menetapkan panjang dan tipe per posisi, sehingga elemen berlebih maupun akses di luar jangkauan ditolak compiler.
• Bentuk sudut Array<T> lebih mudah dibaca untuk tipe elemen yang panjang, sedangkan T[] lebih ringkas untuk tipe sederhana.
• Akses indeks pada array biasa mengembalikan T tanpa jaminan keberadaan, sehingga tuple lebih aman untuk data berbentuk tetap.

Referensi#

• Everyday Types — The TypeScript Handbook — Panduan tipe harian, termasuk pengetikan array dan tuple.
• Array — MDN Web Docs — Referensi struktur array dan properti length pada JavaScript.