TypeScript Academy · Pelajaran

ReadonlyArray dan ReadonlyMap

Gunakan jenis koleksi readonly bawaan.

ReadonlyArray dan ReadonlyMap adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Tipe Koleksi Hanya-Baca

Selain array, TypeScript menyediakan varian hanya-baca dari koleksi bawaannya: ReadonlyArray<T>, ReadonlyMap<K, V>, dan ReadonlySet<T>. Masing-masing hanya menyediakan bagian API yang tidak mengubah data.

const arr: ReadonlyArray<number> = [1, 2, 3];
console.log(arr.length, arr.includes(2));

Ringkasan ReadonlyArray

ReadonlyArray<T> memungkinkan iterasi, pengindeksan, dan metode seperti map dan filter, tetapi tidak mengizinkan push, pop, atau penetapan indeks. Ini adalah bentuk array dari keluarga hanya-baca.

const tags: ReadonlyArray<string> = ['ts', 'js'];
console.log(tags.map((t) => t.toUpperCase()));
// tags.push('css'); // Error

ReadonlyMap

ReadonlyMap<K, V> memungkinkan Anda mencari nilai, melakukan iterasi, dan memeriksa kunci, tetapi menghapus set, delete, dan clear. Dari sudut pandang pengguna, isi map tersebut tetap.

const ages: ReadonlyMap<string, number> = new Map([['Ada', 30], ['Sam', 25]]);
console.log(ages.get('Ada'), ages.has('Sam'));
// ages.set('Lee', 40); // Error

Membaca dari ReadonlyMap

Semua operasi baca tetap tersedia: get, has, size, keys, values, entries, dan iterasi. Hanya metode yang mengubah data yang dihilangkan.

const m: ReadonlyMap<string, number> = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of m) {
  console.log(k, v);
}
console.log('size:', m.size);

ReadonlySet

ReadonlySet<T> mendukung pemeriksaan keanggotaan dan iterasi, tetapi menghapus add, delete, dan clear. Gunakan tipe ini untuk kumpulan tetap yang berisi nilai allowed.

const allowed: ReadonlySet<string> = new Set(['read', 'write']);
console.log(allowed.has('read'), allowed.has('delete'));
// allowed.add('admin'); // Error

Melakukan Iterasi pada ReadonlySet

Anda dapat melakukan iterasi pada ReadonlySet dan membaca size-nya, tetapi tidak dapat mengubah isinya. Hal ini membuatnya ideal untuk daftar putih dan kumpulan izin.

const perms: ReadonlySet<string> = new Set(['view', 'edit']);
perms.forEach((p) => console.log('perm:', p));
console.log('count:', perms.size);

Meneruskan Koleksi Hanya-Baca ke Fungsi

Terimalah tipe koleksi hanya-baca dalam fungsi yang hanya perlu membaca data. Ini menyampaikan maksud dengan jelas dan mencegah fungsi mengubah data milik pemanggil.

function describe(set: ReadonlySet<string>): string {
  return 'has ' + set.size + ' items';
}
const s = new Set(['x', 'y']);
console.log(describe(s));

Koleksi yang Dapat Diubah Dapat Ditetapkan

Map atau Set biasa dapat ditetapkan ke padanan hanya-bacanya, karena Anda sedang mempersempit kemampuan, bukan memperluasnya. Fungsi tersebut hanya melepaskan hak untuk mengubah data.

function keys(m: ReadonlyMap<string, number>): string[] {
  return Array.from(m.keys());
}
const real = new Map([['a', 1]]);
console.log(keys(real));

API Koleksi Tak Dapat Diubah

Tipe koleksi hanya-baca menggambarkan tampilan yang tidak dapat diubah. Objek dasarnya mungkin tetap dapat diubah di tempat lain; tipe hanya-baca membatasi tindakan yang dapat dilakukan melalui referensi ini.

const backing = new Set<number>([1, 2]);
const view: ReadonlySet<number> = backing;
// view.add(3); // Error through the readonly view
backing.add(3); // but the original can still mutate
console.log(view.size);

Memilih Tipe Hanya-Baca yang Tepat

Sesuaikan tipe hanya-baca dengan struktur data Anda: ReadonlyArray untuk daftar berurutan, ReadonlyMap untuk pencarian berdasarkan pasangan kunci-nilai, dan ReadonlySet untuk keanggotaan unik. Masing-masing menerapkan ketidakubahan sesuai bentuknya.

const roles: ReadonlySet<string> = new Set(['admin', 'user']);
const limits: ReadonlyMap<string, number> = new Map([['admin', 100]]);
console.log(roles.has('user'), limits.get('admin'));

Status Bersama yang Lebih Aman

Mengekspos koleksi internal sebagai tipe hanya-baca mencegah pemanggil merusak status modul Anda. Mereka dapat memeriksa data dengan bebas, tetapi hanya kode Anda yang dapat mengubahnya.

class Registry {
  private items = new Set<string>();
  add(name: string): void { this.items.add(name); }
  get all(): ReadonlySet<string> { return this.items; }
}
const r = new Registry();
r.add('a');
console.log(r.all.has('a'));

Pemeriksaan Singkat

Uji pemahaman Anda tentang tipe koleksi hanya-baca.

Ringkasan: Koleksi Hanya-Baca

Anda telah mempelajari keluarga koleksi hanya-baca:

ReadonlyArray<T>, ReadonlyMap<K, V>, dan ReadonlySet<T> hanya menyediakan operasi baca.
Metode yang mengubah data (set, add, delete, push) dihilangkan.
Koleksi yang dapat diubah dapat ditetapkan ke padanan hanya-bacanya.
Tipe ini sangat cocok sebagai tipe parameter dan tipe kembalian untuk status bersama yang lebih aman.

Terakhir, pola ketidakubahan mendalam.

function count(s: ReadonlySet<number>): number {
  return s.size;
}
console.log(count(new Set([1, 2, 3])));

Pertanyaan yang Sering Diajukan

Apakah pelajaran “ReadonlyArray dan ReadonlyMap” gratis?

Ya — teks lengkap “ReadonlyArray dan ReadonlyMap” 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 “ReadonlyArray dan ReadonlyMap”?

Gunakan jenis koleksi readonly bawaan. 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 3 dari 4.

Berapa lama pelajaran “ReadonlyArray dan ReadonlyMap” 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