Memahami Type Assertion dan Type Narrowing dalam TypeScript

Dalam dunia TypeScript, tipe data adalah fondasi utama yang memastikan kode lebih aman, mudah dipelihara, dan minim bug. Namun, tidak semua situasi dapat dikenali secara otomatis oleh sistem pengetikan TypeScript. Kadang, developer sudah tahu lebih banyak tentang tipe data dibandingkan TypeScript itu sendiri. Di sinilah konsep Type Assertion dan Type Narrowing berperan penting untuk membantu TypeScript memahami konteks yang lebih spesifik.

Type Assertion memungkinkan kita memberi tahu TypeScript tipe data yang sebenarnya dari sebuah nilai, sedangkan Type Narrowing membantu TypeScript mempersempit tipe data berdasarkan kondisi tertentu. Dengan dua konsep ini, kita dapat menulis kode yang lebih fleksibel, tetap aman, dan mudah dibaca — terutama saat bekerja dengan data dinamis seperti API, form, atau input user.

Apa Itu Type Assertion?

Type Assertion adalah cara untuk memberi tahu TypeScript secara eksplisit bahwa kita yakin tentang tipe dari sebuah nilai. Dalam istilah sederhana, ini seperti mengatakan kepada TypeScript: “Percayalah padaku, aku tahu tipe datanya.”

Sintaks Type Assertion menggunakan keyword as:

let value: unknown = "Hello TypeScript";
let strLength = (value as string).length;

Pada contoh di atas, value awalnya bertipe unknown, tetapi kita tahu bahwa isinya adalah string. Dengan as string, TypeScript mengizinkan kita mengakses properti .length yang hanya dimiliki oleh tipe string.

Contoh Penggunaan Type Assertion

1. Mengonversi tipe data DOM

Saat bekerja dengan elemen DOM di browser, TypeScript biasanya mengembalikan tipe HTMLElement yang umum. Jika kita ingin mengakses properti spesifik, kita bisa menggunakan Type Assertion.

const inputElement = document.querySelector("input#username") as HTMLInputElement;
console.log(inputElement.value);

Tanpa as HTMLInputElement, TypeScript akan memberikan error karena HTMLElement belum tentu memiliki properti value.

2. Mengubah tipe union menjadi tipe spesifik

type User = { name: string } | { id: number };

let user: User = { name: "Alice" };
console.log((user as { name: string }).name);

Dengan as, kita bisa menentukan tipe spesifik dari nilai union agar bisa mengakses propertinya dengan aman.

Kesalahan Umum dalam Type Assertion

Walaupun powerful, Type Assertion harus digunakan dengan hati-hati. TypeScript tidak benar-benar mengubah tipe data di runtime, hanya cara compiler memahaminya.

Misalnya:

let num = 100 as unknown as string; // Ini tidak benar-benar menjadi string

Kode di atas tidak akan menimbulkan error saat dikompilasi, tapi bisa menyebabkan bug saat runtime. Jadi, gunakan Type Assertion hanya jika benar-benar yakin terhadap tipe data.

Apa Itu Type Narrowing?

Berbeda dengan Type Assertion yang “memaksa” tipe, Type Narrowing adalah proses di mana TypeScript secara otomatis mempersempit kemungkinan tipe data berdasarkan kondisi logika dalam kode.

Misalnya, ketika kita memeriksa tipe dengan typeof, TypeScript tahu bahwa di dalam blok if, tipe datanya lebih spesifik.

Contoh sederhana:

function printId(id: number | string) {
  if (typeof id === "string") {
    console.log("ID (string):", id.toUpperCase());
  } else {
    console.log("ID (number):", id.toFixed(2));
  }
}

Pada contoh di atas, TypeScript memahami bahwa di dalam kondisi if, id adalah string, dan di bagian else, id adalah number.

Operator Type Narrowing

TypeScript menyediakan beberapa operator untuk membantu proses narrowing:

1. typeof

Digunakan untuk tipe primitif seperti string, number, boolean, undefined, dan symbol.

function checkType(value: string | number) {
  if (typeof value === "string") {
    console.log("Panjang string:", value.length);
  } else {
    console.log("Nilai angka:", value.toFixed(2));
  }
}

2. instanceof

Digunakan untuk memeriksa apakah suatu objek merupakan instance dari sebuah class tertentu.

class Animal {
  speak() { console.log("Hewan bersuara"); }
}

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

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.speak();
  }
}

Dengan instanceof, TypeScript tahu bahwa di dalam kondisi tersebut, tipe animal adalah Dog, bukan hanya Animal.

3. in

Digunakan untuk memeriksa keberadaan properti di dalam objek. Ini berguna saat bekerja dengan tipe union berbasis objek.

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

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

Dalam contoh ini, in membantu TypeScript mengetahui apakah objek tersebut bertipe Fish atau Bird.

Perbedaan Type Assertion dan Type Narrowing

Aspek	Type Assertion	Type Narrowing
Cara kerja	Menentukan tipe secara manual oleh developer	TypeScript menentukan tipe secara otomatis
Tujuan	“Memaksa” tipe sesuai keyakinan developer	Menyaring tipe berdasarkan kondisi logis
Risiko	Lebih rawan kesalahan jika salah asumsi	Lebih aman karena berbasis analisis compiler
Penggunaan umum	Saat bekerja dengan DOM atau data API yang kompleks	Saat menangani union type atau tipe campuran

Contoh Gabungan Type Assertion dan Type Narrowing

Kadang kita perlu menggabungkan keduanya untuk kasus kompleks:

function getElementValue(el: HTMLElement | null) {
  if (el) {
    const input = el as HTMLInputElement;
    console.log("Value:", input.value);
  }
}

Dalam contoh ini, kita menggunakan narrowing untuk memastikan el tidak null, lalu memakai assertion agar TypeScript tahu bahwa el adalah HTMLInputElement.

Kesimpulan

Type Assertion dan Type Narrowing adalah dua konsep penting dalam TypeScript yang berfungsi untuk mengontrol dan memastikan tipe data secara lebih akurat.

Type Assertion digunakan ketika kita yakin terhadap tipe suatu nilai.
Type Narrowing memungkinkan TypeScript secara otomatis mempersempit tipe berdasarkan logika program menggunakan typeof, instanceof, dan in.

Dengan memahami keduanya, Anda dapat menulis kode TypeScript yang lebih aman, efisien, dan mudah dirawat — tanpa kehilangan fleksibilitas dalam menangani data dinamis.