TypeScript Academy · Pelajaran

DeepPartial dan DeepReadonly

Bangun versi rekursif Partial dan Readonly.

Pelajaran 1 dari 413 langkah

DeepPartial dan DeepReadonly adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Mengapa Utilitas Tipe Mendalam?

Partial dan Readonly bawaan hanya berlaku pada satu tingkat. Untuk objek bertingkat, Anda memerlukan versi rekursif.

interface Config {
  db: { host: string; port: number };
  app: { name: string };
}
type Shallow = Partial<Config>;
// Shallow.db is still required — only top level is optional

Menerapkan DeepPartial

Petakan properti objek secara rekursif, jadikan masing-masing opsional, lalu terapkan DeepPartial secara rekursif jika nilai properti tersebut merupakan objek.

type DeepPartial<T> = T extends object
  ? { [K in keyof T]?: DeepPartial<T[K]> }
  : T;

DeepPartial dalam Praktik

Terapkan DeepPartial pada tipe konfigurasi bertingkat dan lihat bahwa semua tingkat menjadi opsional.

type PartialConfig = DeepPartial<Config>;
// PartialConfig.db?: { host?: string; port?: number }

const c: PartialConfig = { db: { host: "localhost" } };
// No error — all other fields are optional

Menerapkan DeepReadonly

Jadikan setiap properti pada setiap kedalaman readonly dengan melakukan rekursi ke dalam tipe objek bertingkat.

type DeepReadonly<T> = T extends object
  ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
  : T;

DeepReadonly dalam Praktik

Konfigurasi yang dibekukan secara mendalam tidak dapat diubah pada tingkat mana pun.

type ReadonlyConfig = DeepReadonly<Config>;
const cfg: ReadonlyConfig = { db: { host: "localhost", port: 5432 }, app: { name: "my-app" } };
// cfg.db.port = 3000; // Error: readonly

Menangani Array dalam Tipe Mendalam

Array memerlukan penanganan khusus—petakan tipe elemen secara rekursif, bukan memperlakukan array sebagai objek biasa.

type DeepPartial<T> =
  T extends (infer U)[]
    ? DeepPartial<U>[]
    : T extends object
      ? { [K in keyof T]?: DeepPartial<T[K]> }
      : T;

Menangani Tipe Primitif

Kasus dasar rekursi harus mengembalikan tipe primitif apa adanya, bukan membungkusnya dalam tipe terpetakan objek.

type DeepReadonly<T> =
  T extends string | number | boolean | null | undefined ? T
  : T extends (infer U)[] ? ReadonlyArray<DeepReadonly<U>>
  : { readonly [K in keyof T]: DeepReadonly<T[K]> };

Menggabungkan DeepPartial dan DeepReadonly

Anda dapat menggabungkan keduanya untuk membuat tipe yang secara mendalam bersifat parsial dan hanya-baca, demi penerapan patch konfigurasi yang aman.

type SafePatch<T> = DeepReadonly<DeepPartial<T>>;

Pertimbangan Kinerja

Tipe rekursif pada objek yang sangat besar dapat memperlambat pemeriksaan tipe TypeScript. Pertimbangkan batas kedalaman atau evaluasi malas untuk kode yang kritis terhadap kinerja.

// For very deep schemas, consider using Zod or io-ts
// which provide runtime + compile-time deep typing

Penggunaan Nyata: Patch Status React

DeepPartial sangat cocok untuk fungsi patch status yang hanya menerima bagian objek status besar yang berubah.

function patch<T>(state: T, changes: DeepPartial<T>): T {
  return { ...state, ...changes } as T;
}

Ringkasan: Utilitas Tipe Mendalam

DeepPartial dan DeepReadonly adalah tipe terpetakan rekursif yang menerapkan pengubahnya pada setiap tingkat objek bertingkat. Tangani array secara terpisah dan gunakan kasus dasar untuk tipe primitif.

Pemeriksaan Singkat

Apa kasus dasar rekursif yang benar untuk DeepPartial?

Jawab di pelajaran interaktif

Yang Anda Pelajari

Anda telah menerapkan DeepPartial dan DeepReadonly menggunakan tipe terpetakan rekursif. Tangani array sebagai kasus khusus dan selalu kembalikan tipe primitif tanpa perubahan pada kasus dasar.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 101
Pelajaran: 352

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “DeepPartial dan DeepReadonly” gratis?

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

Bangun versi rekursif Partial dan Readonly. 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 1 dari 4.

Berapa lama pelajaran “DeepPartial dan DeepReadonly” 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