TypeScript Academy · Pelajaran

Pola Imutabilitas Mendalam

Wujudkan struktur readonly secara mendalam dengan jenis rekursif.

Pola Imutabilitas Mendalam adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Ketidakubahan Dangkal dibandingkan Mendalam

Pengubah readonly bersifat dangkal: pengubah ini melindungi tingkat teratas, tetapi tidak melindungi objek bertingkat. Ketidakubahan mendalam berarti setiap tingkat, hingga paling dalam, bersifat hanya-baca. Untuk mencapainya diperlukan usaha tambahan.

interface State { readonly user: { name: string }; }
const s: State = { user: { name: 'Ada' } };
// s.user = {...}; // Error (shallow protection)
s.user.name = 'Grace'; // allowed! nested field is mutable
console.log(s.user.name);

Mengapa Sifat Dangkal Tidak Cukup

Untuk pengelolaan state dan data bersama, sifat hanya-baca yang dangkal membiarkan bidang bertingkat tetap dapat diubah. Satu perubahan yang terlewat jauh di dalam struktur dapat menyebabkan masalah yang samar dan sulit dilacak.

interface Config { readonly db: { host: string; port: number }; }
const c: Config = { db: { host: 'localhost', port: 5432 } };
c.db.port = 9999; // mutates nested data despite readonly
console.log(c.db.port);

Tipe DeepReadonly Rekursif

Kita dapat membuat tipe pemetaan yang menerapkan readonly secara rekursif. DeepReadonly<T> menelusuri setiap properti dan, jika properti tersebut berupa objek, menerapkan rekursi ke dalamnya.

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};
console.log('DeepReadonly defined');

Menerapkan DeepReadonly

Membungkus tipe dengan DeepReadonly membuat properti bertingkat juga tidak dapat diubah. Kini bahkan s.user.name tidak dapat ditetapkan ulang—perlindungannya menjangkau hingga tingkat terdalam.

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};
type State = DeepReadonly<{ user: { name: string } }>;
const s: State = { user: { name: 'Ada' } };
// s.user.name = 'x'; // Error now
console.log(s.user.name);

Cara Kerja Tipe Pemetaan

[K in keyof T] mengiterasi setiap kunci. Awalan readonly mengunci masing-masing kunci. Kondisional T[K] extends object ? ... : T[K] menentukan apakah harus melakukan rekursi atau berhenti pada tipe primitif.

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};
type Cfg = DeepReadonly<{ a: number; b: { c: string } }>;
const cfg: Cfg = { a: 1, b: { c: 'x' } };
console.log(cfg.a, cfg.b.c);

Perlindungan Hanya saat Kompilasi

DeepReadonly menegakkan ketidakubahan dalam sistem tipe, bukan saat program berjalan. Objek JavaScript secara teknis masih dapat diubah melalui jalur tanpa tipe—tetapi kode bertipe Anda sepenuhnya terlindungi.

// Type-level immutability does not freeze the runtime object.
// For runtime guarantees, combine it with Object.freeze.
console.log('Types guard your code; freeze guards runtime');

Membekukan Objek Bertingkat saat Program Berjalan

Untuk ketidakubahan nyata saat program berjalan, gunakan Object.freeze. Fungsi ini mencegah penambahan, penghapusan, atau perubahan properti—tetapi, seperti readonly, secara bawaan bersifat dangkal.

const config = Object.freeze({ host: 'localhost', port: 8080 });
console.log(config.port);
// In strict mode, config.port = 1 throws; otherwise silently ignored.

Pembantu Pembekuan Mendalam

Untuk membekukan secara mendalam saat program berjalan, lakukan rekursi melalui objek bertingkat dan bekukan masing-masing. Hal ini secara alami melengkapi DeepReadonly pada tingkat tipe untuk ketidakubahan menyeluruh.

function deepFreeze<T>(obj: T): T {
  Object.values(obj as any).forEach((v) => {
    if (v && typeof v === 'object') deepFreeze(v);
  });
  return Object.freeze(obj);
}
const frozen = deepFreeze({ a: { b: 1 } });
console.log(frozen.a.b);

Ketidakubahan untuk State yang Lebih Aman

Ketidakubahan mendalam adalah landasan state yang dapat diprediksi. Ketika data tidak dapat diubah di tempatnya, pembaruan harus membuat objek baru, sehingga perubahan menjadi eksplisit dan mudah dilacak.

const state = { count: 0, user: { name: 'Ada' } };
// Immutable update: create a new object instead of mutating
const next = { ...state, count: state.count + 1 };
console.log(state.count, next.count);

Pola Pembaruan Tanpa Mengubah Data

Dengan data hanya-baca, Anda menghasilkan versi baru melalui operator penyebaran. Setiap pembaruan menghasilkan objek baru, sehingga state sebelumnya tetap utuh—sangat berguna untuk pembatalan tindakan, penelusuran kesalahan lintas waktu, dan deteksi perubahan.

type State = { readonly items: readonly string[] };
const s: State = { items: ['a'] };
const updated: State = { items: [...s.items, 'b'] };
console.log(s.items, updated.items);

Menggabungkan Keamanan Tipe dan Saat Berjalan

Pendekatan terkuat menggunakan keduanya: DeepReadonly untuk jaminan waktu kompilasi dan deepFreeze untuk penegakan saat program berjalan. Bersama-sama, keduanya membuat perubahan yang tidak disengaja hampir mustahil.

function freeze<T>(obj: T): T {
  return Object.freeze(obj);
}
const settings = freeze({ theme: 'dark', version: 2 });
console.log(settings.theme, settings.version);

Pemeriksaan Singkat

Uji pemahaman Anda tentang ketidakubahan mendalam.

Ringkasan: Ketidakubahan Mendalam

Anda telah mempelajari bahwa:

readonly bersifat dangkal; bidang bertingkat tetap dapat diubah.
Tipe pemetaan rekursif DeepReadonly<T> menerapkan sifat hanya-baca pada setiap tingkat.
Sifat ini hanya berlaku saat kompilasi; gunakan Object.freeze secara mendalam untuk penegakan saat program berjalan.
Ketidakubahan memungkinkan state yang aman dan dapat diprediksi melalui pola salin saat pembaruan.

Jalur Akademi TypeScript tentang tipe lanjutan dan ketidakubahan telah selesai.

type State = { readonly value: number };
const s: State = { value: 1 };
const next: State = { ...s, value: s.value + 1 };
console.log(s.value, next.value);

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Imutabilitas Mendalam” gratis?

Ya — teks lengkap “Pola Imutabilitas Mendalam” 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 “Pola Imutabilitas Mendalam”?

Wujudkan struktur readonly secara mendalam dengan jenis rekursif. 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 4 dari 4.

Berapa lama pelajaran “Pola Imutabilitas Mendalam” 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