TypeScript - Tipe Kondisional

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

Tipe Kondisional Dasar

mari mulai dari dasar. Tipe Kondisional dalam TypeScript mirip seperti membuat keputusan dalam kode Anda. Bayangkan Anda di toko es krim, dan Anda harus memutuskan antara coklat dan vanila berdasarkan cuaca panas atau tidak. Itu sebenarnya apa yang dilakukan Tipe Kondisional dalam TypeScript!

Berikut adalah contoh sederhana:

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

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

Tapi menunggu, boolean selalu dapat menjadi true, kan? mari 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 tipe WeatherChoice yang mengambil parameter tipe T. Jika T extends (atau cocok) "Hot", kita pilih "Ice Cream"; jika tidak, kita pilih "Hot Chocolate".

Tipe Kondisional Generik

Sekarang, mari naik tingkat! Tipe Kondisional Generik memungkinkan kita membuat tipe yang lebih fleksibel dan dapat digunakan kembali. Pahami ini 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 tipe generik yang memeriksa jika tipe input T adalah array. Jika ya, ia mengembalikan true; jika tidak, ia mengembalikan false.

Mari coba 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 tipe elemen dalam array. Jika T adalah array, ia menginfersikan tipe elemen U dan mengembalikannya. Jika T bukan array, ia mengembalikan never (yang berarti "ini tidak pernah terjadi").

Batasan Tipe Kondisional

kadang-kadang, kita ingin memberikan batasan pada tipe kita. Itu seperti mengatakan, " Anda hanya bisa mendapatkan es krim jika Anda sudah selesai makan sayuran!" mari lihat bagaimana ini bekerja dalam 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 tipe yang extends number. Itu kemudian memeriksa jika angka itu 0 atau tidak.

Inferring Dalam Tipe Kondisional

Terakhir tapi bukan terkecil, mari bicarakan tentang inferring dalam tipe kondisional. Ini seperti memiliki mesin es krim supercerdas yang dapat menentukan rasa 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, ia menginfersikan tipe elemen U dan mengembalikannya. Jika tidak, ia mengembalikan T seperti biasa.

Mari coba sesuatu yang lebih tingkat lanjut:

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 menginfersikan tipe kembalian dari sebuah fungsi. Itu memeriksa jika T adalah tipe fungsi, dan jika begitu, ia menginfersikan dan mengembalikan tipe kembalian R.

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dalam dunia Tipe Kondisional dalam TypeScript. Ingat, seperti belajar menunggang sepeda, mungkin merasa berayun pada awalnya, tapi dengan latihan, Anda akan segera berlari tanpa masalah!

Berikut adalah tabel referensi cepat dari metode yang kita pelajari:

Metode	Deskripsi
Tipe Kondisional Dasar	Buat keputusan tipe berdasarkan kondisi
Tipe Kondisional Generik	Buat tipe fleksibel dan dapat digunakan kembali
Batasan Tipe Kondisional	Memberikan batasan pada tipe input
Inferring Dalam Tipe Kondisional	Ekstrak dan infer tipe dalam kondisi

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

Credits: Image by storyset