ID: Indonesia

TypeScript - Utility Types

Halo sana, para ahli coding masa depan! Hari ini, kita akan memulai perjalanan menarik melalui realm yang magic TypeScript Utility Types. Jangan khawatir jika Anda baru saja memulai programming; saya akan menjadi panduan ramah Anda, dan kita akan mengexplore konsep ini bersama-sama, langkah demi langkah. Jadi, ambil keyboard Anda (tongkat sihir), dan mari kita masuk ke dalam!

Apa Itu Utility Types?

Sebelum kita mulai, mari kita mengerti apa itu Utility Types. Bayangkan Anda memiliki sebuah kotak alat yang penuh dengan berbagai jenis alat. Setiap alat membantu Anda melakukan tugas tertentu lebih efisien. Itu tepat apa yang Utility Types dalam TypeScript - mereka adalah alat yang sudah dibangun sebelumnya untuk membantu kita memanipulasi dan mentransformasi jenis-jenis dengan mudah.

Sekarang, mari kita lihat setiap alat magic ini satu per satu!

Tipe Partial dalam TypeScript

Tipe Partial adalah seperti mantra yang membuat semua properti dalam objek menjadi opsional. Ini sangat berguna ketika Anda ingin membuat objek tempat Anda tidak perlu menentukan semua properti.

mari kita lihat contohnya:

interface Wizard {
name: string;
age: number;
house: string;
}

function updateWizard(wizard: Wizard, fieldsToUpdate: Partial<Wizard>) {
return { ...wizard, ...fieldsToUpdate };
}

const harryPotter: Wizard = {
name: "Harry Potter",
age: 11,
house: "Gryffindor"
};

const updatedHarry = updateWizard(harryPotter, { age: 17 });
console.log(updatedHarry);
// Output: { name: "Harry Potter", age: 17, house: "Gryffindor" }

Dalam contoh ini, Partial<Wizard> memungkinkan kita untuk memperbarui hanya umur Harry tanpa perlu menentukan semua properti lainnya. Itu seperti mengayunkan tongkat dan mengatakan, "Partial Revelio!"

Tipe Required dalam TypeScript

Tipe Required adalah kebalikan dari Partial. Itu seperti melempar mantra yang membuat semua properti dalam objek diperlukan, bahkan jika mereka awalnya opsional.

interface MagicalCreature {
name: string;
power?: string;
age?: number;
}

const dragon: Required<MagicalCreature> = {
name: "Norwegian Ridgeback",
power: "Api Nafas",
age: 2
};

// Ini akan menyebabkan kesalahan:
// const unicorn: Required<MagicalCreature> = {
//   name: "Silver Horn"
// };

Di sini, meskipun power dan age adalah opsional dalam interface asli, tipe Required membuat mereka wajib. Itu seperti mengatakan, "Accio semua properti!"

Tipe Pick dalam TypeScript

Tipe Pick memungkinkan Anda membuat jenis baru dengan memilih properti tertentu dari jenis yang sudah ada. Itu seperti menggunakan Charm Panggil untuk memanggil hanya properti yang Anda butuhkan.

interface Potion {
name: string;
ingredients: string[];
brewingTime: number;
effect: string;
}

type PotionLabel = Pick<Potion, 'name' | 'effect'>;

const polyjuicePotion: PotionLabel = {
name: "Potion Polyjuice",
effect: "Transformasi minuman menjadi orang lain"
};

Dalam contoh ini, kita telah membuat jenis baru PotionLabel yang hanya termasuk name dan effect dari interface Potion. Itu sempurna untuk saat Anda butuh beberapa detail tertentu!

Tipe Omit dalam TypeScript

Tipe Omit adalah kebalikan dari Pick. Itu membuat jenis baru dengan menghapus properti tertentu dari jenis yang sudah ada. P想象它像使用消失咒语来移除某些属性！

interface SpellBook {
title: string;
author: string;
pages: number;
secretSpell: string;
}

type PublicSpellBook = Omit<SpellBook, 'secretSpell'>;

const beginnerSpellBook: PublicSpellBook = {
title: "Buku Standar mantra, Kelas 1",
author: "Miranda Goshawk",
pages: 250
};

Di sini, kita telah membuat jenis PublicSpellBook yang termasuk semua properti SpellBook kecuali secretSpell. Itu seperti mengatakan, "Tampilkan semua kecuali rahasia!"

Tipe Readonly dalam TypeScript

Tipe Readonly adalah seperti melempar mantra perlindungan pada propertimu. Itu membuat semua properti dalam jenis menjadi read-only, mencegah modifikasi yang tak sengaja.

interface Wand {
wood: string;
core: string;
length: number;
}

const harryWand: Readonly<Wand> = {
wood: "Holly",
core: "Berkas Phoenix",
length: 11
};

// Ini akan menyebabkan kesalahan:
// harryWand.length = 12;

Dengan Readonly, kita telah memastikan bahwa setelah tongkat diciptakan, propertinya tidak dapat diubah. Itu seperti memberikan Tongkat Tak Terkoyak pada objek Anda!

Tipe ReturnType dalam TypeScript

Tipe ReturnType memungkinkan Anda untuk mengekstrak jenis kembalian dari sebuah fungsi. Itu seperti menggunakan Legilimency untuk melihat apa yang dikembalikan oleh fungsi!

function castSpell(spellName: string): { name: string, power: number } {
// Logika memancing mantra di sini
return { name: spellName, power: Math.random() * 100 };
}

type SpellResult = ReturnType<typeof castSpell>;

const lumos: SpellResult = {
name: "Lumos",
power: 50
};

Dalam contoh ini, SpellResult dinyatakan sebagai { name: string, power: number }, yang adalah jenis kembalian dari castSpell. Itu sangat berguna saat bekerja dengan fungsi yang kompleks!

Tipe Record dalam TypeScript

Tipe Record adalah mantra kuat yang membuat jenis objek dengan jenis kunci tertentu dan jenis nilai tertentu. Itu seperti menciptakan peta magic di mana Anda menentukan jenis kunci dan nilai.

type HouseCup = Record<string, number>;

const housePoints: HouseCup = {
"Gryffindor": 472,
"Hufflepuff": 352,
"Ravenclaw": 426,
"Slytherin": 472
};

Di sini, HouseCup adalah jenis di mana kunci adalah string (nama rumah) dan nilai adalah number (poin). Itu memastikan bahwa objek poin rumah Anda memiliki struktur yang benar.

Tipe NonNullable dalam TypeScript

Tipe NonNullable adalah seperti melempar mantra untuk menghapus nilai null dan undefined. Itu membuat jenis baru dengan menghapus null dan undefined dari jenis yang diberikan.

type MagicalItem = string | number | null | undefined;

type DefiniteMagicalItem = NonNullable<MagicalItem>;

const definiteItem: DefiniteMagicalItem = "Cloak Kehidupan";
// Ini akan menyebabkan kesalahan:
// const nullItem: DefiniteMagicalItem = null;

Dalam contoh ini, DefiniteMagicalItem adalah jenis yang dapat menjadi string atau number, tetapi bukan null atau undefined. Itu sempurna saat Anda ingin memastikan Anda bekerja dengan nilai nyata!

Utility Types Cheat Sheet

Berikut adalah tabel referensi cepat untuk semua Utility Types yang kitaulas:

Utility Type	Deskripsi	Contoh
Partial	Membuat semua properti dalam T opsional	Partial<Wizard>
Required	Membuat semua properti dalam T diperlukan	Required<MagicalCreature>
Pick<T, K>	Membuat jenis dengan hanya properti K dari T	Pick<Potion, 'name' | 'effect'>
Omit<T, K>	Membuat jenis tanpa properti K dari T	Omit<SpellBook, 'secretSpell'>
Readonly	Membuat semua properti dalam T read-only	Readonly<Wand>
ReturnType	Ekstrak jenis kembalian dari fungsi T	ReturnType<typeof castSpell>
Record<K, T>	Membuat jenis objek dengan kunci jenis K dan nilai jenis T	Record<string, number>
NonNullable	Membuat jenis dengan menghapus null dan undefined dari T	NonNullable<MagicalItem>

Dan begitu Anda punya nya, para pengguna sihir muda! Anda sekarang telah menguasai mantra dasar TypeScript Utility Types. Ingat, seperti semua sihir, jenis ini menjadi lebih kuat dengan latihan. Jadi, terus mencoba, dan segera Anda akan dapat mengayunkan jenis ini dengan mudah seperti mengatakan "Wingardium Leviosa"!

Credits: Image by storyset