TypeScript Academy · Pelajaran

Menggabungkan typeof dan keyof

Turunkan jenis yang tepat dengan merangkai operator jenis.

Menggabungkan typeof dan keyof 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.

Kombinasi Ampuh

Secara terpisah, typeof menurunkan tipe dari suatu nilai dan keyof mencantumkan kunci suatu tipe. Jika digabungkan — keyof typeof value — keduanya menghasilkan gabungan kunci aktual suatu nilai, sehingga akses sepenuhnya aman tipe.

keyof typeof dalam Praktik

Mulailah dengan objek const, ambil tipenya melalui typeof, lalu cantumkan kuncinya dengan keyof. Hasilnya adalah gabungan nama kunci literal objek tersebut.

const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])

Mengapa Pola Ini Ada

Anda sering memiliki objek saat waktu eksekusi, tetapi tidak memiliki antarmuka terpisah. keyof typeof memberi Anda tipe kunci tanpa menggandakan struktur objek sebagai tipe yang ditulis secara manual.

const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2

Akses Aman Tipe Berdasarkan Kunci

Parameter fungsi yang bertipe keyof typeof obj menolak kunci tidak valid pada waktu kompilasi, sehingga akses terindeks di dalamnya dijamin aman.

const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
  return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key

Objek Konstan Mirip Enumerasi

Idiom yang umum: definisikan objek as const sebagai enumerasi semu, lalu turunkan tipe kunci dan nilai keduanya dari objek tersebut.

const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)

Kunci dan Nilai

Perhatikan perbedaannya: keyof typeof obj memberikan nama kunci, sedangkan typeof obj[keyof typeof obj] memberikan tipe nilai. Pilih yang sesuai dengan kebutuhan API Anda.

const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)

Generik getProperty

Pengambil aman tipe klasik membatasi parameter kunci dengan K extends keyof T dan mengembalikan T[K], sehingga tipe hasil persis sesuai dengan properti yang dicari.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)

Tipe Kembalian Mengikuti Kunci

Karena nilai kembalian adalah T[K], tipe hasil setiap pemanggilan menyesuaikan kunci spesifik yang diberikan — berupa angka untuk satu kunci dan teks untuk kunci lainnya.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id")     // number
const nm = getProperty(u, "name")   // string
console.log(id, nm)

Kunci Tidak Valid Ditolak

Memberikan kunci yang tidak ada pada objek akan menghasilkan galat kompilasi. Batasan generik menegakkannya sebelum kode dijalankan.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))

Penyetel Aman Tipe

Mekanisme yang sama dapat membangun penyetel: parameter nilainya adalah T[K], sehingga Anda hanya dapat menetapkan nilai dengan tipe yang benar untuk kunci tersebut.

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)

Menggabungkannya

Pola keyof typeof ditambah akses generik T[K] memberi Anda utilitas yang aman dan dapat digunakan ulang pada objek nyata — dasar utama pembaca konfigurasi bertipe, pencarian, dan pembantu formulir.

const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
  return theme[name]
}
console.log(color("danger")) // #f00

Uji Singkat

Uji pemahaman Anda tentang penggabungan typeof dan keyof.

Ringkasan

keyof typeof value menurunkan gabungan kunci aktual suatu nilai tanpa menulis antarmuka terpisah, sehingga akses terindeks menjadi aman tipe. Bedakan tipe kunci (keyof typeof obj) dari tipe nilai (typeof obj[keyof typeof obj]). Pola generik getProperty<T, K extends keyof T>(obj, key): T[K] mengembalikan tipe yang persis dicari dan menolak kunci tidak valid pada waktu kompilasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggabungkan typeof dan keyof” gratis?

Ya — teks lengkap “Menggabungkan typeof dan keyof” 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 typeof dan keyof”?

Turunkan jenis yang tepat dengan merangkai operator jenis. 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 “Menggabungkan typeof dan keyof” 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