TypeScript - Type Guards: A Beginner's Guide

Haiya, bakat pemrograman masa depan! ? Saya begitu gembira untuk menjadi pandu Anda dalam perjalanan menarik ke dunia TypeScript dan Type Guards. Sebagai seseorang yang telah mengajar sains komputer selama bertahun-tahun, saya bisa katakan bahwa memahami type guards adalah seperti memiliki kekuatan super dalam universe TypeScript. Jadi, mari kita masuk dan buka kekuatan ini bersama!

Apa Itu Type Guards?

Sebelum kita masuk ke hal-hal khusus, mari kita pahami apa itu type guards. Bayangkan Anda adalah penjaga 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 tugas yang sama - mereka membantu compiler memeriksa dan memperkecil jenis variabel dalam blok kode tertentu.

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

Type Guard	Deskripsi
typeof	Memeriksa jenis variabel
in	Memeriksa jika sebuah properti ada dalam objek
instanceof	Memeriksa jika objek adalah instance kelas tertentu

Type Guard 'typeof' di TypeScript

Type guard 'typeof' adalah seperti bertanya, "Apa jenis hal yang Anda?" 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 jika strs adalah objek (yang mencakup array) atau string. Jika itu adalah objek, kita perulangannya. Jika itu adalah string, kita cetak langsung.

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

Type Guard 'in' di TypeScript

Type guard 'in' adalah seperti bertanya, "Apakah Anda memiliki fitur ini?" Itu memeriksa jika sebuah properti ada 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 jika animal memiliki properti swim. Jika itu ada, 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 jika hewan peliharaan Anda adalah ikan atau burung, Anda mungkin memeriksa jika itu memiliki sirip. Itu apa yang 'in' type guard melakukan - memeriksa properti khusus.

Type Guard 'instanceof' di TypeScript

Type guard 'instanceof' adalah seperti bertanya, "Apakah Anda anggota keluarga ini?" Itu memeriksa jika objek adalah instance 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 jika pet adalah instance kelas Bird. Jika itu benar, kita memanggil metode fly. Jika tidak, kita anggap itu adalah Fish dan memanggil metode swim.

Bayangkan Anda di acara keluarga, dan Anda mencoba menentukan jika seseorang adalah anggota keluarga Johnson. Anda mungkin bertanya, "Apakah Anda Johnson?" Itu exactly apa yang instanceof melakukan 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("Peda!); }
}

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("Jenis kendaraan tak diketahui");
}
}

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

Dalam contoh ini, kita menggunakan semua tiga type guards:

1. Kita menggunakan typeof untuk memeriksa jika kendaraan adalah string.
2. Kita menggunakan instanceof untuk memeriksa jika itu adalah Car.
3. Kita menggunakan in untuk memeriksa jika 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, murid pemrograman saya! Kita telah menjelajahi negeri TypeScript Type Guards, mengexploreasi typeof, in, dan instanceof guards. Alat kuat ini akan membantu Anda menulis kode yang lebih aman dan prediktif dengan membiarkan TypeScript memahami kehendak Anda dengan lebih baik.

Ingat, menggunakan type guards adalah seperti having a conversation yang 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!

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

Credits: Image by storyset