TypeScript - Utility Types

Haiya, para penggunaan masa depan yang menakjubkan! Hari ini, kita akan melangkah ke dalam perjalanan yang menarik melalui kerajaan ajaib jenis-jenis Utility Types di TypeScript. Jangan bimbang jika anda baru dalam bidang programming; saya akan menjadi pandu anda yang ramah, dan kita akan menjelajah konsep ini bersama-sama, langkah demi langkah. Jadi, ambil wands (papan kekunci) maya anda, dan mari kita masuk ke dalam!

Apa Itu Utility Types?

Sebelum kita mula, mari kita memahami apa Utility Types itu. Bayangkan anda mempunyai sebuah kotak alat yang penuh dengan pelbagai jenis alat. Setiap alat membantu anda melakukan tugas tertentu secara lebih efisyen. Itu betul apa yang Utility Types di TypeScript - mereka adalah alat pra-binaan yang membantu kita untuk memanipulasi dan mengubah jenis-jenis dengan mudah.

Sekarang, mari kita lihat setiap alat ajaib ini satu demi satu!

Jenis Partial di TypeScript

Jenis Partial adalah seperti sejenis mantra yang menjadikan semua properti dalam objek menjadi opsional. Ia sangat berguna ketika anda mahu membuat objek di mana anda tidak perlu menentukan semua properti.

Mari kita lihat ia dalam tindakan:

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> membolehkan kita memperbarui hanya umur Harry tanpa perlu menentukan semua properti lain. Ia seperti mengayunkan wands dan berkata, "Partial Revelio!"

Jenis Required di TypeScript

Jenis Required adalah sebaliknya daripada Partial. Ia seperti melempar mantra yang menjadikan semua properti dalam objek diperlukan, walaupun jika mereka adalah opsional pada asal.

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, walaupun power dan age adalah opsional dalam jenis asal, jenis Required menjadikan mereka mandatory. Ia seperti berkata, "Accio semua properti!"

Jenis Pick di TypeScript

Jenis Pick membolehkan anda membuat jenis baru dengan memilih properti khusus daripada jenis yang sedia ada. Ia seperti menggunakan mantra panggilan untuk memanggil hanya properti yang anda perlukan.

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

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

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

Dalam contoh ini, kita telah membuat jenis baru PotionLabel yang hanya termasuk name dan effect daripada jenis Potion. Ia sempurna untuk saat anda memerlukan beberapa butir khusus!

Jenis Omit di TypeScript

Jenis Omit adalah sebaliknya daripada Pick. Ia membuat jenis baru dengan menghapuskan properti khusus daripada jenis yang sedia ada. Ber fikir tentang ia seperti menggunakan mantra penghilangan pada properti tertentu!

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

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

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

Di sini, kita telah membuat jenis PublicSpellBook yang termasuk semua properti SpellBook kecuali secretSpell. Ia seperti berkata, "Tunjukkan kepada saya segalanya kecuali rahsia!"

Jenis Readonly di TypeScript

Jenis Readonly adalah seperti melempar mantra perlindungan pada properti anda. Ia menjadikan semua properti dalam jenis read-only, mengelak modifikasi tak sengaja.

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

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

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

Dengan Readonly, kita telah memastikan bahawa sekali wands dicipta, propertinya tidak boleh diubah. Ia seperti memberikan mantra tak terkoyak pada objek anda!

Jenis ReturnType di TypeScript

Jenis ReturnType membolehkan anda mengekstrak jenis kembalian dari fungsi. Ia seperti menggunakan Legilimency untuk melihat ke dalam fungsi dan melihat apa yang ia kembalikan!

function castSpell(spellName: string): { name: string, power: number } {
// Logik menjalankan 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 }, jenis kembalian daripada castSpell. Ia sangat berguna ketika bekerja dengan fungsi kompleks!

Jenis Record di TypeScript

Jenis Record adalah mantra kuat yang membuat jenis objek dengan jenis kunci tertentu dan jenis nilai. Ia seperti mencipta peta ajaib di mana anda menentukan jenis kunci dan nilai apa yang harus ada.

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). Ia memastikan bahawa objek poin rumah kita mempunyai struktur yang betul.

Jenis NonNullable di TypeScript

Jenis NonNullable adalah seperti melempar mantra untuk menghapuskan nilai null dan undefined. Ia membuat jenis baru dengan mengeluarkan null dan undefined daripada jenis yang diberikan.

type MagicalItem = string | number | null | undefined;

type DefiniteMagicalItem = NonNullable<MagicalItem>;

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

Dalam contoh ini, DefiniteMagicalItem adalah jenis yang boleh menjadi string atau number, tetapi bukan null atau undefined. Ia sempurna untuk saat anda mahu memastikan anda bekerja dengan nilai sebenar!

Cheatsheet Jenis Utility

Berikut adalah jadual rujukan cepat untuk semua jenis Utility yang kita telahulas:

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

Danitu, para penggunaan masa depan! Anda sekarang telah menguasai jenis-jenis asas mantra Utility di TypeScript. Ingat, seperti mana mantra mana, jenis ini menjadi lebih kuat dengan latihan. Jadi, terus mencuba, dan segera anda akan menjalankan jenis ini dengan mudah seperti berkata "Wingardium Leviosa"!

Credits: Image by storyset