TypeScript - Type Guards: A Beginner's Guide

Hai teman programmer masa depan! ? Saya sangat senang menjadi panduanmu dalam perjalanan menarik ke dunia TypeScript dan Type Guards. Sebagai orang yang telah mengajar ilmu komputer selama tahun-tahun, saya bisa katakan bahwa memahami type guards adalah seperti memiliki kekuatan super di dalam universitas TypeScript. Jadi, mari kita masuk dan membuka kekuatan ini bersama!

Apa Itu Type Guards?

Sebelum kita melompat ke hal-hal khusus, mari kita pahami apa itu type guards. Bayangkan Anda adalah petugas keamanan di sebuah pesta mewah. Tugas Anda adalah untuk memeriksa undangan setiap tamu dan memastikan mereka diizinkan masuk ke area yang benar. Type guards di TypeScript melakukan pekerjaan yang sama - mereka membantu kompiler memeriksa dan memperkecil jenis variabel di dalam blok kode tertentu.

Sekarang, mari kita jelajahi tiga jenis penjaga utama yang kita akan belajar hari ini:

Type Guard	Deskripsi
typeof	Memeriksa jenis variabel
in	Memeriksa apakah properti ada di dalam objek
instanceof	Memeriksa apakah objek adalah contoh dari kelas

Type Guard 'typeof' di TypeScript

Type guard 'typeof' adalah seperti bertanya, "Apa jenismu?" Itu digunakan untuk memeriksa jenis variabel. Mari kita lihat contoh:

function printAll(strs: string | string[] | null) {
if (typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
} else if (typeof strs === "string") {
console.log(strs);
} else {
// tidak melakukan apa-apa
}
}

Dalam contoh ini, kita menggunakan typeof untuk memeriksa apakah strs adalah objek (yang mencakup array) atau string. Jika itu adalah objek, kita loop melalui itu. Jika itu adalah string, kita cetak langsung.

Ini adalah cara menyenangkan untuk mengingat ini: bayangkan Anda di toko hewan, dan Anda ingin tahu apakah hewan itu adalah anjing atau kucing. Anda mungkin bertanya, "Apa jenis hewanmu?" Itu exactly apa yang typeof lakukan di TypeScript!

Type Guard 'in' di TypeScript

Type guard 'in' adalah seperti bertanya, "Apakah Anda memiliki fitur ini?" Itu memeriksa apakah properti ada di dalam objek. Mari kita lihat contoh:

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
if ("swim" in animal) {
animal.swim();
} else {
animal.fly();
}
}

Dalam kode ini, kita memeriksa apakah animal memiliki properti swim. Jika ya, kita anggap itu adalah Fish dan memanggil metode swim. Jika tidak, kita anggap itu adalah Bird dan memanggil metode fly.

Pikirkan seperti ini: jika Anda mencoba menentukan apakah hewan peliharaan baru Anda adalah ikan atau burung, Anda mungkin memeriksa apakah itu memiliki sirip. Itu apa yang 'in' type guard lakukan - memeriksa properti khusus.

Type Guard 'instanceof' di TypeScript

Type guard 'instanceof' adalah seperti bertanya, "Apakah Anda anggota keluarga ini?" Itu memeriksa apakah objek adalah contoh dari kelas tertentu. Mari kita lihat contoh:

class Bird {
fly() {
console.log("Terbang...");
}
}

class Fish {
swim() {
console.log("Renang...");
}
}

function move(pet: Bird | Fish) {
if (pet instanceof Bird) {
pet.fly();
} else {
pet.swim();
}
}

let myBird = new Bird();
move(myBird); // Output: Terbang...

Dalam contoh ini, kita memeriksa apakah pet adalah contoh dari kelas Bird. Jika ya, kita memanggil metode fly. Jika tidak, kita anggap itu adalah Fish dan memanggil metode swim.

Bayangkan Anda di pertemuan keluarga, dan Anda mencoba menentukan apakah seseorang adalah bagian dari keluarga Johnson. Anda mungkin bertanya, "Apakah Anda Johnson?" Itu exactly apa yang instanceof lakukan di TypeScript!

Menggabungkan Semua

Sekarang kita telah belajar tentang tiga type guards ini, mari kita lihat bagaimana kita mungkin menggunakannya semua bersamaan:

class Car {
drive() { console.log("Vroom!"); }
}

class Bicycle {
ride() { console.log("Pendalaman!"); }
}

type Vehicle = Car | Bicycle | string;

function useVehicle(vehicle: Vehicle) {
if (typeof vehicle === "string") {
console.log(`Kendaraan adalah: ${vehicle}`);
} else if (vehicle instanceof Car) {
vehicle.drive();
} else if ("ride" in vehicle) {
vehicle.ride();
} else {
console.log("Tipe kendaraan tak dikenal");
}
}

useVehicle("Skateboard");  // Output: Kendaraan adalah: Skateboard
useVehicle(new Car());     // Output: Vroom!
useVehicle(new Bicycle()); // Output: Pendalaman!

Dalam contoh ini, kita menggunakan semua tiga type guards:

1. Kita menggunakan typeof untuk memeriksa apakah kendaraan adalah string.
2. Kita menggunakan instanceof untuk memeriksa apakah itu adalah Car.
3. Kita menggunakan in untuk memeriksa apakah memiliki metode ride (yang menandakan itu adalah Bicycle).

Ini seperti menjadi detektif super, menggunakan semua keterampilan Anda untuk menentukan jenis kendaraan yang Anda hadapi!

Kesimpulan

Dan begitulah, para murid pemrograman! Kita telah berjalan melalui negeri Type Guards TypeScript, meng eksplorasi typeof, in, dan instanceof guards. Alat kuat ini akan membantu Anda menulis kode yang lebih aman dan dapat diprediksi lebih baik dengan membiarkan TypeScript memahami kehendak Anda lebih baik.

Ingat, menggunakan type guards adalah seperti berbicara secara ramah dengan kode Anda. Anda hanya bertanya untuk memahami lebih baik. Jadi berikutnya kali Anda sedang programming, jangan malu - mulai berbicara dengan variabel Anda menggunakan type guards ini!

Tetap latihan, tetap curiga, dan sebelum Anda tahu, Anda akan menjaga jenis seperti seorang pro. Sampaijumpa lagi, selamat programming! ??

Credits: Image by storyset