TypeScript Academy · Pelajaran

Mendefinisikan Tanda Tangan Indeks

Deskripsikan objek yang kuncinya belum diketahui sebelumnya.

Pelajaran 1 dari 413 langkah

Mendefinisikan Tanda Tangan Indeks 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.

Objek dengan Kunci yang Tidak Diketahui

Terkadang Anda belum mengetahui nama properti sebelumnya—kamus skor, tembolok, atau tabel pencarian. Tanda tangan indeks TypeScript memungkinkan Anda menjelaskan objek yang memiliki keys sembarang, tetapi semua nilainya memiliki satu tipe yang sama.

Sintaks Dasar Tanda Tangan Indeks

Tanda tangan indeks ditulis sebagai { [key: string]: number }. Artinya, setiap kunci teks memetakan ke nilai angka. Nama key hanyalah label—Anda dapat menamainya sesuka hati.

type Scores = { [name: string]: number }

const game: Scores = { alice: 10, bob: 7 }
console.log(game.alice) // 10

Menambahkan Kunci secara Dinamis

Karena setiap kunci teks diizinkan, Anda dapat menetapkan properti baru sama sekali saat waktu berjalan tanpa membuat TypeScript memprotes. Inilah inti dari tanda tangan indeks.

type Scores = { [name: string]: number }

const game: Scores = {}
game.charlie = 5     // allowed
game["dave"] = 9     // also allowed
console.log(game.charlie + game.dave) // 14

Mengakses Kunci Sembarang

Anda dapat membaca kunci apa pun, bahkan kunci yang belum pernah ditetapkan. Sistem tipe mempercayai tanda tangan tersebut, sehingga tipe nilainya adalah number—tetapi saat waktu berjalan, kunci yang tidak ada bernilai undefined. Berhati-hatilah.

type Scores = { [name: string]: number }

const game: Scores = { alice: 10 }
const missing = game.zara // typed as number, but actually undefined
console.log(missing) // undefined

Semua Nilai Harus Sesuai

Setiap properti dalam objek harus sesuai dengan tipe nilai pada tanda tangan. Anda tidak dapat memasukkan nilai angka ke dalam kamus yang nilainya berupa teks.

type Labels = { [key: string]: string }

const ok: Labels = { id: "a1", role: "admin" }
// const bad: Labels = { id: "a1", count: 5 } // Error: 5 not a string

Tanda Tangan Indeks dalam Antarmuka

Sintaks yang sama berfungsi di dalam sebuah interface. Ini umum digunakan untuk menjelaskan objek konfigurasi atau pemetaan respons dari API.

interface Dictionary {
  [word: string]: string
}

const defs: Dictionary = {
  cat: "a small animal",
  ts: "a typed superset of JavaScript",
}
console.log(defs.ts)

Tipe Nilai Dapat Berupa Apa Saja

Sisi nilai tidak terbatas pada tipe primitif. Anda dapat memetakan kunci ke larik, objek, atau gabungan—apa pun yang diperlukan oleh data Anda.

type Groups = { [team: string]: string[] }

const roster: Groups = {
  red: ["ana", "leo"],
  blue: ["sam"],
}
console.log(roster.red.length) // 2

Mengiterasi Objek Bertanda Tangan Indeks

Perulangan for...in mengunjungi setiap kunci dinamis. Di dalam perulangan, nilai diberi tipe yang tepat sesuai dengan tanda tangan.

type Scores = { [name: string]: number }
const game: Scores = { alice: 10, bob: 7 }

for (const name in game) {
  console.log(name + ": " + game[name])
}

Kesenjangan Keamanan undefined

Tanda tangan indeks menyembunyikan fakta bahwa pencarian dapat gagal. Mengaktifkan noUncheckedIndexedAccess dalam konfigurasi TypeScript menambahkan | undefined ke setiap akses, sehingga Anda harus menangani kunci yang tidak ada.

// with noUncheckedIndexedAccess on:
type Scores = { [name: string]: number }
const game: Scores = { alice: 10 }
const v = game.bob // type: number | undefined
console.log(v ?? 0)

Tanda Tangan Indeks Hanya Baca

Awali tanda tangan dengan readonly untuk melarang penulisan melalui kunci apa pun. Kamus tersebut menjadi struktur yang hanya dapat digunakan untuk pencarian.

type Frozen = { readonly [key: string]: number }

const rates: Frozen = { usd: 1, eur: 1.1 }
// rates.usd = 2 // Error: read-only
console.log(rates.eur)

Saat Tanda Tangan Indeks Berguna

Gunakan tanda tangan indeks ketika kumpulan kunci bersifat terbuka dan ditemukan saat waktu berjalan: tembolok, penghitung berdasarkan pengenal, atau parameter kueri yang diurai. Untuk kumpulan kunci yang tetap dan diketahui, pilih properti eksplisit atau Record.

type Counter = { [event: string]: number }
const clicks: Counter = {}
function track(e: string) { clicks[e] = (clicks[e] ?? 0) + 1 }
track("open"); track("open")
console.log(clicks.open) // 2

Pemeriksaan Singkat

Uji pemahaman Anda tentang tanda tangan indeks.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mempelajari bahwa { [key: string]: T } menjelaskan objek dengan keys sembarang yang semua nilainya memiliki tipe T yang sama. Keys dapat ditambahkan secara dinamis, setiap nilai harus sesuai dengan tanda tangan, dan pencarian kunci yang tidak ada bernilai undefined saat waktu berjalan. Gunakan readonly untuk pemetaan yang tidak dapat diubah dan aktifkan noUncheckedIndexedAccess agar akses lebih aman.

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 “Mendefinisikan Tanda Tangan Indeks” gratis?

Ya — teks lengkap “Mendefinisikan Tanda Tangan Indeks” 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 “Mendefinisikan Tanda Tangan Indeks”?

Deskripsikan objek yang kuncinya belum diketahui sebelumnya. 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 “Mendefinisikan Tanda Tangan Indeks” 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