TypeScript Academy · Pelajaran

Operator Jenis keyof

Dapatkan union kunci dari suatu jenis objek dengan keyof.

Operator Jenis keyof adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Kunci suatu Tipe

Operator keyof menerima tipe objek dan menghasilkan gabungan kunci propertinya. Operator ini menjadi dasar akses properti yang aman secara tipe dan utilitas kunci generik.

Dasar-dasar keyof

Terapkan keyof pada antarmuka untuk mendapatkan gabungan nama kuncinya sebagai tipe literal string.

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

Hanya Kunci yang Valid yang Diizinkan

Variabel bertipe keyof T hanya dapat berisi salah satu kunci yang benar-benar dimiliki T. Kesalahan ketik dan kunci yang tidak valid akan terdeteksi saat kompilasi.

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

keyof dengan typeof

Gabungkan dengan typeof untuk mendapatkan kunci dari tipe hasil inferensi suatu nilai. Di sini, kita mendapatkan kunci objek config tanpa menulis antarmuka.

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

keyof pada Signatur Indeks String

Untuk tipe dengan signatur indeks string, keyof adalah string | number — karena kunci string apa pun diizinkan dan kunci numerik dikonversi menjadi string.

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

keyof pada Signatur Indeks Angka

Untuk signatur indeks angka, keyof hanyalah number. Ini sesuai dengan cara larik menyediakan indeks numerik.

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

keyof pada Tipe Larik

Menerapkan keyof pada tipe larik menghasilkan gabungan yang mungkin mengejutkan: indeks numerik, serta semua nama metode dan properti larik seperti length dan push.

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

Melakukan Iterasi Kunci dengan Aman

Gunakan keyof untuk menulis perulangan yang hanya menyentuh kunci valid. Mengonversi Object.keys menjadi (keyof T)[] menjaga keamanan tipe pada akses terindeks.

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

keyof dalam Batasan Generik

Parameter kunci generik biasanya dibatasi dengan K extends keyof T. Ini menjamin bahwa kunci tersebut benar-benar ada pada objek.

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

Menggabungkan Beberapa Kunci

Karena keyof T merupakan gabungan, Anda dapat mengambil irisan atau memfilternya. Di sini, sebuah fungsi menerima larik kunci yang valid.

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

Mengapa keyof Penting

keyof mengubah nama properti menjadi tipe yang dapat diperiksa, sehingga memungkinkan pengambil, penyetel, dan pemeta generik yang tidak dapat merujuk kunci yang tidak ada. Operator ini digunakan di berbagai bagian TypeScript tingkat lanjut.

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

Pemeriksaan Singkat

Uji pemahaman Anda tentang operator keyof.

Rangkuman

keyof T menghasilkan gabungan kunci properti T sebagai tipe literal, sehingga variabel dibatasi hanya pada kunci yang valid. Operator ini menghasilkan string | number untuk signatur indeks string dan number untuk signatur indeks angka. Jika dipasangkan dengan typeof, operator ini menurunkan kunci dari nilai; jika dipasangkan dengan generik (K extends keyof T), operator ini mendukung pengambil, pemilih, dan iterasi yang aman secara tipe.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Operator Jenis keyof” gratis?

Ya — teks lengkap “Operator Jenis 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 “Operator Jenis keyof”?

Dapatkan union kunci dari suatu jenis objek dengan keyof. 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 2 dari 4.

Berapa lama pelajaran “Operator Jenis 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