TypeScript Academy · Pelajaran

Array dan Tuple readonly

Lindungi array dan tuple dari metode mutasi.

Array dan Tuple readonly adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Larik Hanya-Baca

Larik hanya-baca adalah larik yang dapat Anda baca tetapi tidak dapat Anda ubah. Tuliskan sebagai readonly number[] atau, dengan makna yang sama, ReadonlyArray<number>. Tipe elemen tetap sama; hanya perubahan yang diblokir.

const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonly

Tipe ReadonlyArray

ReadonlyArray<T> adalah bentuk generik yang maknanya identik dengan readonly T[]. Gunakan bentuk yang lebih mudah dibaca; keduanya dapat saling menggantikan.

const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));

Tanpa Metode Pengubah

Larik hanya-baca sepenuhnya menghilangkan metode yang mengubah data. push, pop, splice, sort, dan reverse tidak tersedia—tipe tersebut memang tidak memilikinya.

const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);

Metode yang Tidak Mengubah Tetap Berfungsi

Metode yang menghasilkan nilai baru tanpa mengubah data—map, filter, concat, dan slice—tetap tersedia. Metode-metode tersebut menghasilkan larik baru dan membiarkan larik asli tetap utuh.

const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchanged

Larik Hanya-Baca sebagai Parameter

Menerima readonly T[] dalam fungsi memberi sinyal bahwa Anda tidak akan mengubah larik milik pemanggil. Hal ini mendokumentasikan maksud dan memungkinkan kompiler menegakkan janji tersebut.

function sum(values: readonly number[]): number {
  return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));

Larik yang Dapat Diubah Dapat Ditetapkan ke Tipe Hanya-Baca

Larik number[] biasa dapat ditetapkan ke parameter readonly number[]—Anda hanya menjanjikan untuk tidak mengubahnya. Sebaliknya, tidak diperbolehkan.

function total(v: readonly number[]): number {
  return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // ok

Tupel Hanya-Baca

Tupel juga dapat bersifat hanya-baca: readonly [string, number]. Tipe dan urutan elemen tetap, dan setiap posisi tidak dapat ditetapkan ulang.

const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tuple

Tupel Hanya-Baca Mencegah Perubahan

Seperti larik hanya-baca, tupel hanya-baca menghapus metode pengubah dan menolak penetapan melalui indeks. Tupel ini sempurna untuk catatan berbentuk tetap seperti pasangan koordinat.

const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);

Pernyataan Konstanta dibandingkan Tipe Hanya-Baca

Ada dua cara untuk mendapatkan larik hanya-baca, dan keduanya memiliki perbedaan kecil. Anotasi readonly number[] mempertahankan tipe elemen umum. as const melangkah lebih jauh: anotasi ini membuat tupel hanya-baca dengan tipe yang hanya memuat nilai-nilai literal.

const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const;            // readonly [1, 2, 3]
console.log(a[0], b[0]);

Memilih di antara Keduanya

Gunakan anotasi readonly T[] ketika Anda menginginkan ketidakubahan tetapi tetap memerlukan tipe elemen umum. Gunakan as const ketika Anda juga memerlukan nilai literal yang persis, misalnya untuk memperoleh gabungan tipe.

const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);

Ketidakubahan untuk Data Bersama

Larik dan tupel hanya-baca melindungi konstanta bersama serta daftar konfigurasi dari perubahan yang tidak disengaja, sehingga masalah akibat modifikasi tak terduga dapat dicegah saat kompilasi.

const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
  return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));

Pemeriksaan Singkat

Uji pemahaman Anda tentang larik dan tupel hanya-baca.

Ringkasan: Larik dan Tupel Hanya-Baca

Anda telah mempelajari bahwa:

readonly T[] / ReadonlyArray<T> mencegah perubahan, tetapi memungkinkan pembacaan dan metode yang tidak mengubah data.
Metode pengubah seperti push/splice dihapus dari tipe.
Tupel hanya-baca menetapkan panjang dan tipe elemen.
as const melangkah lebih jauh dengan menghasilkan tupel hanya-baca berisi tipe literal.

Selanjutnya, tipe koleksi hanya-baca.

const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Array dan Tuple readonly” gratis?

Ya — teks lengkap “Array dan Tuple readonly” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Array dan Tuple readonly”?

Lindungi array dan tuple dari metode mutasi. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Array dan Tuple readonly” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy