TypeScript Academy · Pelajaran

Menggabungkan Kunci yang Diketahui dan Dinamis

Gabungkan properti tetap dengan tanda tangan indeks secara aman.

Pelajaran 3 dari 413 langkah

Menggabungkan Kunci yang Diketahui dan Dinamis 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.

Properti Tetap dan Flexible

Sering kali sebuah objek memiliki beberapa properti yang dijamin, ditambah kumpulan tambahan yang terbuka. TypeScript memungkinkan Anda mendeklarasikan properti bernama dan tanda tangan indeks dalam tipe yang sama—dengan satu batasan penting.

Kunci yang Diketahui di Samping Tanda Tangan

Di sini length selalu ada, sedangkan setiap kunci teks lainnya memetakan ke angka. Properti bernama dan tanda tangan indeks dapat hidup berdampingan.

interface NumberMap {
  length: number
  [key: string]: number
}
const m: NumberMap = { length: 2, a: 1, b: 1 }
console.log(m.length, m.a)

Batasan Kompatibilitas

Masalahnya: tipe setiap properti tetap harus dapat ditetapkan ke tipe nilai tanda tangan indeks. Tanda tangan indeks adalah janji tentang semua keys, sehingga setiap kunci bernama harus mematuhinya.

interface Valid {
  id: number       // ok: number matches the signature
  [key: string]: number
}
const v: Valid = { id: 1, score: 99 }
console.log(v.id + v.score)

Saat Batasan Dilanggar

Jika tipe properti tetap tidak sesuai dengan tipe nilai indeks, TypeScript menolaknya. Properti dengan nama teks tidak dapat berada dalam kamus bernilai angka.

// interface Broken {
//   name: string   // Error: string not assignable to number
//   [key: string]: number
// }

Memperluas Tipe Nilai Indeks

Untuk mengizinkan tipe properti tetap yang beragam, perluas tanda tangan indeks menjadi gabungan yang mencakup semuanya. Sekarang nama teks dan skor numerik dapat digunakan.

interface Record {
  name: string
  [key: string]: string | number
}
const r: Record = { name: "ana", score: 10 }
console.log(r.name, r.score)

Properti Tetap Opsional

Properti tetap dapat bersifat opsional dengan ?. Saat ada, properti tersebut tetap harus kompatibel dengan tanda tangan indeks.

interface Config {
  id: string
  label?: string
  [key: string]: string | undefined
}
const c: Config = { id: "x" }
console.log(c.label) // undefined

Mengapa Properti Opsional Membutuhkan undefined

Karena properti opsional mungkin tidak ada, tipe efektifnya mencakup undefined. Oleh karena itu, tanda tangan indeks juga harus mengizinkan undefined, atau TypeScript akan mengeluhkan anggota opsional tersebut.

interface Safe {
  title?: string
  [key: string]: string | undefined
}
const s: Safe = {}
for (const k in s) console.log(s[k])

Tipe Nilai Berbeda melalui Gabungan

Contoh objek pengaturan yang realistis: tanda logika yang diketahui, teks yang diketahui, dan nilai tambahan sembarang. Gabungan pada tanda tangan mencakup tipe setiap properti tetap.

interface Settings {
  enabled: boolean
  theme: string
  [key: string]: boolean | string
}
const s: Settings = { enabled: true, theme: "dark", lang: "en" }
console.log(s.enabled, s.lang)

Indeks Angka dengan Kunci yang Diketahui

Batasan ini juga berlaku untuk tanda tangan indeks angka. Properti numerik bernama harus sesuai dengan tipe nilai indeks angka.

interface Sparse {
  count: number
  [index: number]: number
}
const sp: Sparse = { count: 1, 0: 100, 1: 200 }
console.log(sp.count, sp[0])

Alternatif yang Lebih Bersih

Jika keys tetap dan keys dinamis benar-benar memiliki tipe yang tidak berkaitan, pertimbangkan untuk memisahkannya: letakkan bagian dinamis di bawah propertinya sendiri. Cara ini menghindari gabungan yang janggal.

interface Better {
  name: string
  scores: { [key: string]: number }
}
const b: Better = { name: "ana", scores: { math: 90 } }
console.log(b.name, b.scores.math)

Kapan Harus Menggabungkannya

Gabungkan keys yang diketahui dan dinamis ketika properti tetap secara alami memiliki tipe nilai yang sama dengan tambahan—misalnya penghitung dengan total, atau pengaturan sejenis dengan beberapa tanda yang dijamin. Jika tidak, penyarangan membuat tipe tetap mencerminkan kenyataan.

interface Tally {
  total: number
  [bucket: string]: number
}
const t: Tally = { total: 0, a: 3, b: 5 }
t.total = t.a + t.b
console.log(t.total) // 8

Pemeriksaan Singkat

Uji pemahaman Anda tentang pencampuran keys tetap dan dinamis.

Jawab di pelajaran interaktif

Rangkuman

Anda dapat mendeklarasikan properti tetap dan tanda tangan indeks secara bersamaan, tetapi tipe setiap properti tetap harus dapat ditetapkan ke tipe nilai tanda tangan indeks. Perluas tanda tangan dengan gabungan untuk mengakomodasi tipe properti tetap yang berbeda, dan sertakan undefined ketika properti tetap bersifat opsional. Jika tipe benar-benar tidak berkaitan, letakkan bagian dinamis di bawah kuncinya sendiri.

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 “Menggabungkan Kunci yang Diketahui dan Dinamis” gratis?

Ya — teks lengkap “Menggabungkan Kunci yang Diketahui dan Dinamis” 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 “Menggabungkan Kunci yang Diketahui dan Dinamis”?

Gabungkan properti tetap dengan tanda tangan indeks secara aman. 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 “Menggabungkan Kunci yang Diketahui dan Dinamis” 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

Mendefinisikan Tanda Tangan Indeks
Tanda Tangan Indeks String versus Number
Menggabungkan Kunci yang Diketahui dan Dinamis
Tanda Tangan Indeks versus Record

← Kembali ke TypeScript Academy