TypeScript - Operator keyof

Halo sana, para pemrogram yang sedang mencari ilmu! Hari ini, kita akan melakukan perjalanan yang menarik ke dalam dunia TypeScript dan mengenal salah satu fitur kuatnya: operator keyof. Jangan khawatir jika Anda masih baru dalam pemrograman; saya akan mengantar Anda melalui konsep ini secara langkah demi langkah, seperti yang saya lakukan untuk ribuan murid dalam tahun-tahun mengajar saya. Jadi, ambil secangkir kopi (atau minuman kesukaan Anda), dan mari kita masuk ke dalamnya!

Apa Itu Operator keyof?

Sebelum kita masuk ke dalam hal-hal teknis, mari kita mengerti apa itu operator keyof. Bayangkan Anda memiliki sebuah peti harta (sebuah objek dalam istilah pemrograman), dan Anda ingin tahu semua kunci yang mungkin untuk membukanya. Itu tepat apa yang keyof lakukan - memberikan Anda daftar semua "kunci" (nama properti) dari jenis objek.

Sebuah Perumpaan Sederhana

Pikirkan indeks buku. Operator keyof adalah seperti bertanya, "Apa saja topik yang dibahas dalam buku ini?" Itu memberikan Anda daftar semua entri dalam indeks.

Sintaks

Sintaks untuk menggunakan operator keyof adalah mudah:

type Keys = keyof ObjectType;

Di sini, ObjectType adalah jenis objek yang Anda minati, dan Keys akan menjadi jenis gabungan semua nama properti dalam ObjectType.

Contoh

Mari kita lihat beberapa contoh untuk benar-benar memahami bagaimana keyof bekerja. Kita akan mulai dari yang sederhana dan secara perlahan meningkatkan kompleksitasnya.

Contoh 1: Penggunaan Dasar

interface Person {
name: string;
age: number;
city: string;
}

type PersonKeys = keyof Person;

// PersonKeys setara dengan: "name" | "age" | "city"

Dalam contoh ini, kita memiliki sebuah Person interface dengan tiga properti. Ketika kita gunakan keyof Person, TypeScript memberikan kita jenis gabungan semua nama properti dalam Person.

Contoh 2: Menggunakan keyof dengan Variabel

const person: Person = {
name: "Alice",
age: 30,
city: "Wonderland"
};

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}

console.log(getProperty(person, "name")); // Output: Alice
console.log(getProperty(person, "age"));  // Output: 30
// console.log(getProperty(person, "job")); // Error: Argument of type '"job"' is not assignable to parameter of type 'keyof Person'.

Di sini, kita membuat sebuah fungsi getProperty yang menerima sebuah objek Person dan sebuah kunci dari Person. TypeScript memastikan bahwa kita hanya bisa menggunakan kunci valid dari Person, mencegah kesalahan pada saat kompilasi.

Contoh 3: Akses Properti Dinamis

function pluck<T, K extends keyof T>(obj: T, keys: K[]): T[K][] {
return keys.map(key => obj[key]);
}

const car = {
make: "Toyota",
model: "Corolla",
year: 2020
};

const result = pluck(car, ["make", "year"]);
console.log(result); // Output: ["Toyota", 2020]

Dalam contoh ini yang lebih avanz, kita membuat sebuah fungsi pluck yang bisa bekerja dengan jenis objek apa saja. Itu menerima sebuah objek dan sebuah array dari kunci-kunci nya, mengembalikan sebuah array dari nilai-nilai yang sesuai.

Contoh 4: Menggabungkan keyof dengan Tipe Mapped

type Optional<T> = {
[K in keyof T]?: T[K];
};

interface User {
id: number;
name: string;
email: string;
}

type OptionalUser = Optional<User>;

// OptionalUser setara dengan:
// {
//   id?: number;
//   name?: string;
//   email?: string;
// }

const partialUser: OptionalUser = { name: "Bob" }; // Ini valid

Di sini, kita membuat sebuah utility type Optional yang membuat semua properti jenis optional. Kita gunakan keyof dalam kombinasi dengan tipe mapped untuk mencapai ini.

Tabel Metode

Berikut adalah tabel yang menggabungkan metode dan konsep yang kita bahas:

Metode/Konsep	Deskripsi	Contoh
keyof	Mengembalikan jenis gabungan semua nama properti jenis objek	type Keys = keyof Person
Akses Properti	Mengakses properti objek menggunakan keyof	obj[key as keyof ObjectType]
Batasan Jenis	Gunakan keyof untuk membatasi jenis generik	K extends keyof T
Tipe Mapped	Gabungkan keyof dengan tipe mapped untuk transformasi jenis	[K in keyof T]?: T[K]

Kesimpulan

Dan begitu, teman-teman! Kita telah melakukan perjalanan melalui tanah keyof di TypeScript. Dari penggunaan dasar hingga kasus yang lebih avanz, Anda telah melihat bagaimana operator ini bisa membuat kode Anda lebih aman dan fleksibel.

Ingat, seperti belajar keterampilan baru, menguasai TypeScript dan fitur-fiturnya memerlukan latihan. Jangan mudah kecewa jika itu tidak langsung berjalan. Terus mencoba, cobalah contoh yang berbeda, dan segera Anda akan bisa menggunakan keyof seperti seorang ahli!

Seperti yang saya selalu katakan kepada murid-muridku, pemrograman adalah seperti memasak - semakin banyak bahan (konsep) Anda mengenal, semakin lezat (efisien dan kuat) resep (program) Anda akan menjadi. Jadi terus meracik pot TypeScript Anda, dan selamat pemrograman!

Credits: Image by storyset