TypeScript - Tipe Union: Pengenalan Ramah untuk Pemula

Hai teman-teman, super bintang coding masa depan! ? Apakah Anda siap untuk mempelajari dunia yang menakjubkan TypeScript dan mengetahui salah satu fitur yang paling kuatnya? Hari ini, kita akan meng eksplor Tipe Union, konsep yang mungkin terdengar menakutkan pada awalnya, tapi saya berjanji Anda akan menemukannya sangat berguna dan bahkan menyenangkan setelah selesai tutorial ini!

Sebagai guru komputer tetangga yang ramah, saya telah melihat banyak siswa terangsang saat mereka memahami konsep ini. Jadi, mari kita mulai perjalanan ini bersamaan, ya?

Apa Itu Tipe Union?

Sebelum kita masuk ke detailnya, mari kita mulai dengan analogi sederhana. Bayangkan Anda punya kotak ajaib yang dapat menampung mobil mainan atau binatang mainan, tapi tidak keduanya sekaligus. Itu seperti apa arti Tipe Union di TypeScript - itu adalah cara untuk memberitahu kode kita bahwa suatu variabel dapat berupa beberapa jenis.

Sekarang, mari kita merusaknya dengan beberapa kode!

Sintaks: Union Literal

Sintaks dasar untuk Tipe Union menggunakan simbol pipa (|) untuk memisahkan jenis yang berbeda. Itu seperti memberitahu TypeScript, "Hey, ini bisa ini ATAU itu!"

let myFavorite: string | number;

myFavorite = "TypeScript"; // Ini valid
console.log(myFavorite); // Output: TypeScript

myFavorite = 42; // Ini juga valid
console.log(myFavorite); // Output: 42

// myFavorite = true; // Ini akan menyebabkan kesalahan

Dalam contoh ini, myFavorite dapat berupa string atau number. Itu seperti kotak ajaib kita yang dapat menampung kata atau nomor, tapi tidak hal lain. Jika kita mencoba memasukkan boolean (seperti true), TypeScript akan mengayunkan tongkat ajaibnya dan menunjukkan kesalahan kepada kita.

Variabel Tipe Union

Mari kita perluas contoh sebelumnya dan lihat bagaimana Tipe Union dapat membuat kode kita lebih fleksibel:

type Pet = "cat" | "dog" | "fish";
let myPet: Pet;

myPet = "cat"; // Ini valid
console.log(`I have a ${myPet}`); // Output: I have a cat

myPet = "dog"; // Ini juga valid
console.log(`I have a ${myPet}`); // Output: I have a dog

// myPet = "elephant"; // Ini akan menyebabkan kesalahan

Di sini, kita telah membuat jenis khusus Pet yang hanya dapat berupa salah satu dari tiga string khusus. Itu seperti memiliki toko hewan peliharaan yang hanya menjual kucing, anjing, dan ikan. Jika Anda mencoba membeli gajah, sayangnya, tidak bisa!

Tipe Union dan Parameter Fungsi

Tipe Union benar-benar terangkasa saat kita menggunakannya dengan fungsi. Mereka memungkinkan fungsi kita untuk lebih versatile tanpa kehilangan keselamatan tipe. Mari kita lihat contoh:

function printId(id: number | string) {
console.log(`Your ID is: ${id}`);
}

printId(101); // Output: Your ID is: 101
printId("202"); // Output: Your ID is: 202

// printId(true); // Ini akan menyebabkan kesalahan

Dalam fungsi ini, printId dapat menerima baik number atau string sebagai argumen. Itu seperti mesin pembaca kartu ID universal yang dapat memproses baik ID numerik dan ID berbasis teks. Tetapi cobalah menggeser kartu ID boolean Anda, dan itu akan dengan hormat menolak!

Tipe Union dan Array

Sekarang, mari kita naik tingkat dan lihat bagaimana Tipe Union bekerja dengan array. Siapkan diri Anda untuk some array magic!

let mixedArray: (number | string)[] = [1, "two", 3, "four", 5];

console.log(mixedArray); // Output: [1, "two", 3, "four", 5]

mixedArray.push(6); // Ini valid
mixedArray.push("seven"); // Ini juga valid

// mixedArray.push(true); // Ini akan menyebabkan kesalahan

console.log(mixedArray); // Output: [1, "two", 3, "four", 5, 6, "seven"]

Di sini, kita telah membuat array yang dapat berisi baik number dan string. Itu seperti playlist yang dapat mencakup baik nomor trek dan judul lagu. Tetapi cobalah menyusup boolean di sana, dan TypeScript akan menangkap Anda paksa!

Kasus Penggunaan Praktis

Sekarang kita telah menutup dasar-dasar, mari kita lihat beberapa konteks dunia nyata di mana Tipe Union dapat menyelamatkan hari:

1. Respon API: Saat bekerja dengan API, kadang-kadang data yang Anda terima dapat berupa jenis yang berbeda. Tipe Union membantu Anda menangani variasi ini dengan mudah.

type ApiResponse = {
status: "success" | "error";
data: string | number | null;
};

function handleResponse(response: ApiResponse) {
if (response.status === "success") {
console.log(`Success! Data: ${response.data}`);
} else {
console.log("An error occurred");
}
}

handleResponse({ status: "success", data: "User profile loaded" });
handleResponse({ status: "error", data: null });

2. Opsi Konfigurasi: Saat membuat fungsi yang konfigurasi, Tipe Union memungkinkan Anda menyediakan set opsi yang valid.

type Color = "red" | "green" | "blue";
type Size = "small" | "medium" | "large";

function createButton(color: Color, size: Size) {
console.log(`Creating a ${color} button of size ${size}`);
}

createButton("red", "medium"); // Valid
// createButton("yellow", "extra-large"); // Ini akan menyebabkan kesalahan

Metode Tipe Union Umum

Berikut adalah tabel metode umum yang dapat Anda gunakan dengan Tipe Union:

Metode	Deskripsi	Contoh
typeof	Memeriksa jenis nilai	typeof x === "string"
instanceof	Memeriksa jika objek adalah instance kelas tertentu	x instanceof Date
in	Memeriksa jika properti ada dalam objek	"name" in x
Array.isArray()	Memeriksa jika nilai adalah array	Array.isArray(x)

Kesimpulan

Wah! Kita telah menempuh banyak tanah hari ini, kan? Tipe Union mungkin terlihat sedikit sulit pada awalnya, tapi mereka adalah alat yang sangat kuat dalam kotak alat TypeScript Anda. Mereka memungkinkan Anda menulis kode yang lebih fleksibel dan kokoh, menangkap kesalahan potensial sebelum mereka terjadi.

Ingat, coding adalah seperti belajar bahasa baru – itu memerlukan latihan dan kesabaran. Jangan kesal jika Anda belum bisa segera. Terus mencoba, terus mengode, dan sebelum Anda sadari, Anda akan menggunakan Tipe Union seperti seorang ahli!

Saat kita menyempurnakan, saya diingatkan oleh seorang siswa yang pernah mengatakan kepadaku, "Tipe Union adalah seperti pisau multifungsi untuk kode saya!" Dan Anda tahu apa? Mereka benar-benar benar. Jadi, majulah, pemrogram muda, dan may your Union Types always be in your favor! ??

Credits: Image by storyset