TypeScript - Jenis Type Kondisional

Hai, para ahli TypeScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia Jenis Type Kondisional. Jangan khawatir jika Anda baru dalam programming - saya akan menjadi panduan ramah Anda, dan kita akan mengambil ini langkah demi langkah. Pada akhir pelajaran ini, Anda akan terkejut betapa banyak yang Anda pelajari!

Jenis Type Kondisional Dasar

Mari kita mulai dengan dasar. Jenis Type Kondisional di TypeScript seperti membuat keputusan dalam kode Anda. Bayangkan Anda di toko es krim, dan Anda harus memutuskan antara cokelat dan vanila berdasarkan apakah hari itu panas atau tidak. Itu sebenarnya apa yang Jenis Type Kondisional lakukan di TypeScript!

Berikut adalah contoh sederhana:

type IceCreamChoice = boolean extends true ? "Chocolate" : "Vanilla";

Dalam kode ini, kita mengatakan: "Jika boolean (yang mewakili benar atau salah) bisa benar, maka pilih Chocolate; jika tidak, pilih Vanilla."

Tapi menunggu, boolean selalu bisa benar, kan? mari kita buat ini lebih praktis:

type WeatherChoice<T> = T extends "Hot" ? "Ice Cream" : "Hot Chocolate";

let summerChoice: WeatherChoice<"Hot"> = "Ice Cream";
let winterChoice: WeatherChoice<"Cold"> = "Hot Chocolate";

Di sini, kita telah membuat jenis WeatherChoice yang mengambil parameter jenis T. Jika T extends (atau cocok) "Hot", kita pilih "Ice Cream"; jika tidak, kita pilih "Hot Chocolate".

Jenis Type Kondisional Generik

Sekarang, mari kita tingkatkan! Jenis Type Kondisional Generik memungkinkan kita membuat jenis yang lebih fleksibel dan dapat digunakan kembali. Bayangkan itu seperti membuat mesin es krim superfleksibel yang dapat membuat rasa berbeda-beda berdasarkan apa yang Anda masukkan.

type IsArray<T> = T extends any[] ? true : false;

type CheckString = IsArray<string>;  // false
type CheckNumberArray = IsArray<number[]>;  // true

Dalam contoh ini, IsArray adalah jenis generik yang memeriksa jika jenis masukan T adalah array. Jika ya, itu mengembalikan true; jika tidak, itu mengembalikan false.

Mari kita mencoba sesuatu yang lebih kompleks:

type ElementType<T> = T extends (infer U)[] ? U : never;

type StringArrayElement = ElementType<string[]>;  // string
type NumberArrayElement = ElementType<number[]>;  // number
type NotArrayElement = ElementType<number>;  // never

Di sini, ElementType mengekstrak jenis elemen dalam array. Jika T adalah array, itu menyimpulkan jenis elemen U dan mengembalikannya. Jika T bukan array, itu mengembalikan never (yang berarti "ini tidak pernah terjadi").

Batasan Jenis Type Kondisional

kadang-kadang, kita ingin memberikan beberapa batasan pada jenis kita. Itu seperti mengatakan, "Anda hanya bisa mendapatkan es krim jika Anda sudah menyelesaikan sayur Anda!" Mari kita lihat bagaimana ini bekerja di TypeScript:

type NumberOperation<T extends number> = T extends 0 ? "Zero" : "Non-zero";

type ZeroCheck = NumberOperation<0>;  // "Zero"
type NonZeroCheck = NumberOperation<5>;  // "Non-zero"
type InvalidCheck = NumberOperation<"5">;  // Error: Type '"5"' does not satisfy the constraint 'number'.

Dalam contoh ini, NumberOperation hanya menerima jenis yang extends number. Itu kemudian memeriksa jika angka itu 0 atau tidak.

Penarikan Dalam Jenis Type Kondisional

Terakhir tapi bukan paling terpenting, mari kita bicarakan penarikan dalam jenis type kondisional. Ini seperti memiliki mesin es krim supercerdas yang dapat menentukan rasa apa yang Anda inginkan berdasarkan suasana hati Anda!

type Flatten<T> = T extends Array<infer U> ? U : T;

type FlattenedNumberArray = Flatten<number[]>;  // number
type FlattenedString = Flatten<string>;  // string

Di sini, Flatten memeriksa jika T adalah array. Jika ya, itu menyimpulkan jenis elemen U dan mengembalikannya. Jika tidak, itu mengembalikan T seperti itu.

Mari kita mencoba sesuatu yang lebih maju:

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

function greet(name: string): string {
return `Hello, ${name}!`;
}

type GreetReturn = ReturnType<typeof greet>;  // string

Dalam contoh ini, ReturnType menyimpulkan jenis kembalian dari fungsi. Itu memeriksa jika T adalah jenis fungsi, dan jika begitu, itu menyimpulkan dan mengembalikan jenis kembalian R.

Kesimpulan

Selamat! Anda telah mengambil langkah pertama ke dunia Jenis Type Kondisional di TypeScript. Ingat, seperti belajar menunggang sepeda, mungkin merasakan wobble di awal, tapi dengan latihan, Anda akan segera bisa mengendarai dengan lancar!

Berikut adalah tabel rujukan cepat metode yang kita pelajari:

Metode	Deskripsi
Jenis Type Kondisional Dasar	Buat keputusan jenis berdasarkan kondisi
Jenis Type Kondisional Generik	Buat jenis yang fleksibel dan dapat digunakan kembali
Batasan Jenis Type Kondisional	Berikan batasan pada jenis masukan
Penarikan Dalam Jenis Type Kondisional	Ekstrak dan simpulkan jenis dalam kondisi

Terus latih, tetap curiga, dan sebelum Anda tahu, Anda akan membuat hal-hal menakjubkan dengan TypeScript. Selamat coding, para ahli TypeScript masa depan!

Credits: Image by storyset