M

MLOG

Bahasa Indonesia

Jelajahi type guard dan type assertion di TypeScript untuk meningkatkan keamanan tipe, mencegah galat waktu proses, dan menulis kode yang lebih tangguh serta mudah dipelihara. Pelajari dengan contoh praktis dan praktik terbaik.

Menguasai Keamanan Tipe: Panduan Komprehensif untuk Type Guard dan Type Assertion

Dalam dunia pengembangan perangkat lunak, terutama saat bekerja dengan bahasa yang diketik secara dinamis seperti JavaScript, menjaga keamanan tipe bisa menjadi tantangan yang signifikan. TypeScript, superset dari JavaScript, menjawab masalah ini dengan memperkenalkan pengetikan statis. Namun, bahkan dengan sistem tipe TypeScript, muncul situasi di mana kompiler memerlukan bantuan dalam menyimpulkan tipe variabel yang benar. Di sinilah type guard dan type assertion berperan. Panduan komprehensif ini akan mendalami fitur-fitur canggih ini, memberikan contoh praktis dan praktik terbaik untuk meningkatkan keandalan dan kemudahan pemeliharaan kode Anda.

Apa itu Type Guard?

Type guard adalah ekspresi TypeScript yang menyempitkan tipe suatu variabel dalam lingkup tertentu. Mereka memungkinkan kompiler untuk memahami tipe variabel dengan lebih tepat daripada yang disimpulkan pada awalnya. Hal ini sangat berguna ketika berhadapan dengan tipe gabungan (union types) atau ketika tipe variabel bergantung pada kondisi waktu proses (runtime). Dengan menggunakan type guard, Anda dapat menghindari galat waktu proses dan menulis kode yang lebih tangguh.

Teknik Type Guard yang Umum

TypeScript menyediakan beberapa mekanisme bawaan untuk membuat type guard:

Menggunakan typeof

Operator typeof adalah cara yang mudah untuk memeriksa tipe primitif dari sebuah variabel. Operator ini mengembalikan string yang menunjukkan tipenya.

function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript tahu 'value' adalah string di sini
  } else {
    console.log(value.toFixed(2)); // TypeScript tahu 'value' adalah number di sini
  }
}

printValue("hello"); // Output: HELLO
printValue(3.14159); // Output: 3.14

Menggunakan instanceof

Operator instanceof memeriksa apakah sebuah objek merupakan instance dari kelas tertentu. Ini sangat berguna saat bekerja dengan pewarisan (inheritance).

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark(); // TypeScript tahu 'animal' adalah Dog di sini
  } else {
    console.log("Suara hewan generik");
  }
}

const myDog = new Dog("Buddy");
const myAnimal = new Animal("Hewan Generik");

makeSound(myDog); // Output: Woof!
makeSound(myAnimal); // Output: Suara hewan generik

Menggunakan in

Operator in memeriksa apakah sebuah objek memiliki properti tertentu. Ini berguna saat berhadapan dengan objek yang mungkin memiliki properti berbeda tergantung pada tipenya.

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

function move(animal: Bird | Fish) {
  if ("fly" in animal) {
    animal.fly(); // TypeScript tahu 'animal' adalah Bird di sini
  } else {
    animal.swim(); // TypeScript tahu 'animal' adalah Fish di sini
  }
}

const myBird: Bird = { fly: () => console.log("Terbang"), layEggs: () => console.log("Bertelur") };
const myFish: Fish = { swim: () => console.log("Berenang"), layEggs: () => console.log("Bertelur") };

move(myBird); // Output: Terbang
move(myFish); // Output: Berenang

Fungsi Type Guard Kustom

Untuk skenario yang lebih kompleks, Anda dapat mendefinisikan fungsi type guard Anda sendiri. Fungsi-fungsi ini mengembalikan predikat tipe, yaitu ekspresi boolean yang digunakan TypeScript untuk menyempitkan tipe variabel. Predikat tipe memiliki bentuk variabel is Tipe.

interface Square {
  kind: "square";
  size: number;
}

interface Circle {
  kind: "circle";
  radius: number;
}

type Shape = Square | Circle;

function isSquare(shape: Shape): shape is Square {
  return shape.kind === "square";
}

function getArea(shape: Shape) {
  if (isSquare(shape)) {
    return shape.size * shape.size; // TypeScript tahu 'shape' adalah Square di sini
  } else {
    return Math.PI * shape.radius * shape.radius; // TypeScript tahu 'shape' adalah Circle di sini
  }
}

const mySquare: Square = { kind: "square", size: 5 };
const myCircle: Circle = { kind: "circle", radius: 3 };

console.log(getArea(mySquare)); // Output: 25
console.log(getArea(myCircle)); // Output: 28.274333882308138

Apa itu Type Assertion?

Type assertion adalah cara untuk memberi tahu kompiler TypeScript bahwa Anda lebih tahu tentang tipe suatu variabel daripada yang dipahaminya saat ini. Ini adalah cara untuk menimpa inferensi tipe TypeScript dan secara eksplisit menentukan tipe suatu nilai. Namun, penting untuk menggunakan type assertion dengan hati-hati, karena dapat melewati pemeriksaan tipe TypeScript dan berpotensi menyebabkan galat waktu proses jika digunakan secara tidak benar.

Type assertion memiliki dua bentuk:

Kata kunci as umumnya lebih disukai karena lebih kompatibel dengan JSX.

Kapan Menggunakan Type Assertion

Type assertion biasanya digunakan dalam skenario berikut:

Contoh Type Assertion

Type Assertion Eksplisit

Dalam contoh ini, kita menegaskan bahwa pemanggilan document.getElementById akan mengembalikan HTMLCanvasElement. Tanpa assertion, TypeScript akan menyimpulkan tipe yang lebih generik yaitu HTMLElement | null.

const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d"); // TypeScript tahu 'canvas' adalah HTMLCanvasElement di sini

if (ctx) {
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
}

Bekerja dengan Tipe Unknown

Saat bekerja dengan data dari sumber eksternal, seperti API, Anda mungkin menerima data dengan tipe yang tidak diketahui (unknown). Anda dapat menggunakan type assertion untuk memberi tahu TypeScript bagaimana memperlakukan data tersebut.

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const data = await response.json();
  return data as User; // Tegaskan bahwa data tersebut adalah User
}

fetchUser(1)
  .then(user => {
    console.log(user.name); // TypeScript tahu 'user' adalah User di sini
  })
  .catch(error => {
    console.error("Galat saat mengambil pengguna:", error);
  });

Peringatan Saat Menggunakan Type Assertion

Type assertion harus digunakan dengan hemat dan hati-hati. Penggunaan type assertion yang berlebihan dapat menutupi galat tipe yang mendasarinya dan menyebabkan masalah saat waktu proses. Berikut adalah beberapa pertimbangan utama:

Penyempitan Tipe (Type Narrowing)

Type guard secara intrinsik terkait dengan konsep penyempitan tipe (type narrowing). Penyempitan tipe adalah proses penyempurnaan tipe variabel ke tipe yang lebih spesifik berdasarkan kondisi atau pemeriksaan waktu proses. Type guard adalah alat yang kita gunakan untuk mencapai penyempitan tipe.

TypeScript menggunakan analisis alur kontrol untuk memahami bagaimana tipe variabel berubah di dalam cabang kode yang berbeda. Ketika type guard digunakan, TypeScript memperbarui pemahaman internalnya tentang tipe variabel, memungkinkan Anda untuk menggunakan metode dan properti yang spesifik untuk tipe tersebut dengan aman.

Contoh Penyempitan Tipe

function processValue(value: string | number | null) {
  if (value === null) {
    console.log("Nilai adalah null");
  } else if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript tahu 'value' adalah string di sini
  } else {
    console.log(value.toFixed(2)); // TypeScript tahu 'value' adalah number di sini
  }
}

processValue("test"); // Output: TEST
processValue(123.456); // Output: 123.46
processValue(null); // Output: Nilai adalah null

Praktik Terbaik

Untuk memanfaatkan type guard dan type assertion secara efektif dalam proyek TypeScript Anda, pertimbangkan praktik terbaik berikut:

Pertimbangan Internasional

Saat mengembangkan aplikasi untuk audiens global, perhatikan bagaimana type guard dan type assertion dapat memengaruhi upaya lokalisasi dan internasionalisasi (i18n). Secara khusus, pertimbangkan:

Kesimpulan

Type guard dan type assertion adalah alat penting untuk meningkatkan keamanan tipe dan menulis kode TypeScript yang lebih tangguh. Dengan memahami cara menggunakan fitur-fitur ini secara efektif, Anda dapat mencegah galat waktu proses, meningkatkan kemudahan pemeliharaan kode, dan menciptakan aplikasi yang lebih andal. Ingatlah untuk mengutamakan type guard daripada type assertion jika memungkinkan, dokumentasikan type assertion Anda, dan validasi data eksternal untuk memastikan keakuratan informasi tipe Anda. Menerapkan prinsip-prinsip ini akan memungkinkan Anda untuk menciptakan perangkat lunak yang lebih stabil dan dapat diprediksi, yang cocok untuk diterapkan secara global.