Type Narrowing TypeScript: Cara Kerja Control Flow Analysis

Type narrowing adalah TypeScript yang menentukan tipe yang lebih spesifik untuk sebuah nilai di titik tertentu dalam kode, berdasarkan pemeriksaan yang sudah dilakukan kode itu. Parameter string | number menjadi string di dalam if (typeof x === "string") dan number di else.

function pad(value: string | number): string {
  if (typeof value === "number") {
    // value: number
    return value.toFixed(2).padStart(8);
  }
  // value: string (number was handled above)
  return value.padStart(8);
}

console.log(`[${pad(3.14159)}]`); // [    3.14]
console.log(`[${pad("abc")}]`);   // [     abc]

Memanggil value.toFixed(2) sebelum pemeriksaan akan menjadi error kompilasi, karena toFixed tidak ada pada string. Pemeriksaannya adalah JavaScript biasa dan berjalan saat runtime; narrowing adalah compiler yang membaca pemeriksaan itu dan menyesuaikan tipenya. Tidak ada kode tambahan yang dihasilkan.

Control Flow Analysis

TypeScript mengikuti setiap jalur di dalam fungsi: if/else, return dan throw lebih awal, switch, perulangan, dan operator short-circuit &&, ||, ?? dan ?:. Di setiap titik, tipe sebuah variabel adalah apa pun yang masih mungkin di sana.

function firstWord(text: string | null | undefined): string {
  if (text == null) return "(none)";   // removes null and undefined
  // text: string
  const trimmed = text.trim();
  const space = trimmed.indexOf(" ");
  return space === -1 ? trimmed : trimmed.slice(0, space);
}

function lengthOrZero(list?: string[]): number {
  return list && list.length > 0 ? list.length : 0; // list: string[] after &&
}

console.log(firstWord("  hello typed world")); // hello
console.log(firstWord(undefined));             // (none)
console.log(lengthOrZero(["a", "b"]), lengthOrZero()); // 2 0

Gaya return lebih awal ("guard clause") adalah cara paling mudah dibaca untuk mempersempit tipe: tangani kasus yang tidak biasa lebih dulu, dan sisa fungsi bekerja dengan tipe yang sudah bersih.

Semua Cara Mempersempit Tipe

Tiga yang terakhir dibahas di halaman type guard dan discriminated union. Sisanya ada di bawah.

Truthiness Narrowing

if (x) membuang null dan undefined (serta tipe literal false, 0, ""). Bentuk ini singkat, dan punya satu jebakan klasik: 0 dan "" bernilai falsy, jadi nilai yang valid dianggap tidak ada.

function describeCount(count: number | undefined): string {
  if (!count) return "unknown";   // bug: 0 is falsy too
  return `${count} items`;
}

function describeCountFixed(count: number | undefined): string {
  if (count === undefined) return "unknown";
  return `${count} items`;
}

console.log(describeCount(0));      // unknown
console.log(describeCountFixed(0)); // 0 items

Untuk number dan string, bandingkan secara eksplisit dengan undefined atau null (atau pakai ??). Truthiness aman untuk object, array, dan fungsi, yang tidak pernah bernilai falsy.

Equality Narrowing

===, !==, == dan != mempersempit kedua sisi. Membandingkan dengan literal mempersempit ke literal itu; == null (kesamaan longgar) cocok dengan null dan undefined sekaligus dalam satu pemeriksaan, dan inilah satu-satunya tempat kesamaan longgar lazim dipakai.

type Status = "active" | "paused" | "deleted";

function label(status: Status, note: string | null | undefined): string {
  if (status === "deleted") return "gone";
  // status: "active" | "paused"
  const suffix = note != null ? ` (${note})` : ""; // note: string in the true branch
  return status.toUpperCase() + suffix;
}

console.log(label("paused", "until Monday")); // PAUSED (until Monday)
console.log(label("active", undefined));      // ACTIVE
console.log(label("deleted", null));          // gone

Membandingkan dua variabel mempersempit keduanya ke tipe yang mungkin sama-sama mereka miliki: kalau a: string | number dan b: string | boolean lolos a === b, keduanya bertipe string di dalam if.

Operator in

"key" in obj mempersempit union dari beberapa object type ke anggota yang punya (atau mungkin punya) property itu.

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

function move(pet: Fish | Bird): string {
  if ("swim" in pet) {
    return pet.swim(); // pet: Fish
  }
  return pet.fly();    // pet: Bird
}

console.log(move({ name: "Nemo", swim: () => "splash" })); // splash
console.log(move({ name: "Tweety", fly: () => "flap" }));  // flap

in juga bekerja pada unknown setelah kamu tahu nilainya adalah object: setelah typeof v === "object" && v !== null && "id" in v, TypeScript tahu v punya property id bertipe unknown. Untuk union yang kamu rancang sendiri, property penanda bersama (kind: "fish") lebih jelas daripada mengecek keberadaan method: pola itu disebut discriminated union.

Assignment Narrowing

Sebuah variabel punya tipe yang dideklarasikan, dan tipe hasil narrowing yang mengikuti nilai yang diberikan kepadanya. Memberikan sebuah nilai mempersempit variabel itu ke tipe nilai tersebut, selama masih di dalam tipe yang dideklarasikan.

let id: string | number = "a-17";
console.log(id.toUpperCase()); // id: string here, so string methods work

id = 42;
console.log(id.toFixed(1));    // id: number now

// id = true; would be an error: the declared type is still string | number

Kapan Narrowing Hilang

Narrowing bersifat lokal dan hati-hati. Beberapa situasi mengembalikannya ke awal:

• Ekspresi yang berbeda. Memeriksa obj.name mempersempit obj.name (dan obj["name"]), tetapi tidak obj[key] ketika key adalah variabel string dan bukan literal, dan tidak juga salinan yang dibuat sebelum pemeriksaan.
• Callback dan pemberian nilai baru. Di dalam callback, let yang sudah dipersempit hanya mempertahankan narrowing-nya kalau tidak diberi nilai baru setelah callback dibuat. const atau parameter yang tidak pernah diberi nilai baru tetap terpersempit.
• Pemeriksaan yang tersembunyi di fungsi bantu. Fungsi isString(x: unknown): boolean tidak memberi tahu compiler apa pun. Beri tipe kembalian berupa type predicate, x is string, dan pemanggilannya akan mempersempit tipe seperti typeof.

// This does not compile: x is reassigned after the callback, so the callback loses the narrowing.
function run(flag: boolean): void {
  let x: string | undefined = flag ? "ready" : undefined;
  if (x !== undefined) {
    [1, 2].forEach(() => console.log(x.length));
  }
  x = undefined;
}

run(true);

Compiler melaporkan index.ts(5,38): error TS18048: 'x' is possibly 'undefined'. Callback itu bisa berjalan belakangan, setelah x = undefined. Hapus pemberian nilai terakhir itu (atau salin nilainya ke const di dalam if), maka kodenya lolos kompilasi dan mencetak 5 dua kali.

Fungsi bantu yang mengembalikan boolean bisa diperbaiki dengan menyatakan apa yang dibuktikannya. Itulah yang disebut type guard:

function isString(value: unknown): value is string {
  return typeof value === "string";
}

Sejak TypeScript 5.5, compiler menyimpulkan predicate seperti itu untuk arrow function sederhana, dan karena itulah list.filter((x) => x !== undefined) sekarang mengembalikan array tanpa undefined.