typeof di TypeScript: Type Guard dan Operator Tipe typeof

typeof punya dua arti di TypeScript. Di dalam ekspresi, ia adalah operator JavaScript: ia berjalan, mengembalikan string seperti "string" atau "number", dan TypeScript mempersempit variabelnya ketika kamu membandingkan string itu. Di posisi tipe, ia adalah type query: typeof config menghasilkan tipe statis dari variabel config.

// 1. The runtime operator: a check that narrows
function double(value: string | number): string | number {
  if (typeof value === "string") {
    return value.repeat(2); // value: string
  }
  return value * 2;         // value: number
}
console.log(double("ab"), double(21)); // abab 42

// 2. The type query: reuse the type of an existing value
const defaults = { retries: 3, verbose: false };
type Options = typeof defaults; // { retries: number; verbose: boolean }

const custom: Options = { retries: 5, verbose: true };
console.log(typeof custom, custom); // object { retries: 5, verbose: true }

Baris terakhir memperlihatkan bedanya: typeof custom di dalam console.log adalah operator runtime dan mencetak object, sedangkan typeof defaults setelah type Options = adalah query saat kompilasi dan tidak pernah sampai ke JavaScript.

Dua Arti Sekilas

TypeScript membedakan keduanya dari posisinya, jadi kata kunci yang sama tidak pernah berarti keduanya sekaligus.

Hasil typeof Saat Runtime

Operator runtime mengembalikan salah satu dari delapan string. Jalankan kode ini untuk melihat hasil dari nilai-nilai yang umum:

const samples: [string, unknown][] = [
  ['"hi"', "hi"],
  ["42", 42],
  ["NaN", NaN],
  ["10n", 10n],
  ["true", true],
  ["undefined", undefined],
  ["null", null],
  ["{}", {}],
  ["[]", []],
  ["new Date(0)", new Date(0)],
  ['new String("x")', new String("x")],
  ["() => 1", () => 1],
  ["class A {}", class A {}],
  ['Symbol("id")', Symbol("id")],
];

for (const [label, value] of samples) {
  console.log(label.padEnd(16), typeof value);
}

Di JavaScript biasa, typeof pada variabel yang tidak pernah dideklarasikan mengembalikan "undefined", bukan melempar error. Di TypeScript, kode itu tidak lolos kompilasi: Cannot find name 'notDeclared'. (TS2304).

Narrowing dengan typeof

Perbandingan typeof di dalam if, switch, operator ternary, atau setelah && mempersempit variabelnya di setiap cabang. Ini adalah cara standar untuk menangani union dari tipe primitif, dan pemeriksaan pertama yang dipakai untuk unknown.

function format(value: unknown): string {
  switch (typeof value) {
    case "string":
      return `"${value}"`;                 // value: string
    case "number":
    case "bigint":
      return value.toLocaleString("en-US"); // value: number | bigint
    case "boolean":
      return value ? "yes" : "no";         // value: boolean
    case "function":
      return `function ${value.name}()`;   // value: Function
    default:
      return String(value);
  }
}

console.log(format("hi"));          // "hi"
console.log(format(1234567.891));   // 1,234,567.891
console.log(format(2n ** 64n));     // 18,446,744,073,709,551,616
console.log(format(true));          // yes
console.log(format(Math.max));      // function max()
console.log(format(undefined));     // undefined

typeof x !== "string" mempersempit ke arah sebaliknya, menjadi semua tipe kecuali string. Compiler juga tahu kedelapan string yang mungkin, jadi salah ketik dalam perbandingan menjadi error kompilasi, bukan pemeriksaan yang diam-diam selalu bernilai false:

// This does not compile: "strnig" is not a possible typeof result.
function kind(value: string | number): string {
  if (typeof value === "strnig") {
    return "text";
  }
  return "number";
}

console.log(kind("hey"));

Compiler mencetak index.ts(3,7): error TS2367: This comparison appears to be unintentional because the types '"bigint" | "boolean" | "function" | "number" | "object" | "string" | "symbol" | "undefined"' and '"strnig"' have no overlap. Di JavaScript biasa, salah ketik itu diam-diam akan mengirim setiap string ke jalur number. Perbaiki ejaannya dan kode itu mencetak text.

Jebakan typeof null

Karena typeof null adalah "object", TypeScript mempersempit typeof x === "object" menjadi object | null, bukan object. Tambahkan pemeriksaan null, kalau tidak, membaca property akan menjadi error (TS18047 'x' is possibly 'null'.).

function hasId(value: unknown): boolean {
  // typeof alone leaves value as object | null
  if (typeof value === "object" && value !== null) {
    // value: object
    return "id" in value;
  }
  return false;
}

console.log(hasId({ id: 7 }));  // true
console.log(hasId(null));       // false
console.log(hasId([1, 2]));     // false (arrays pass the typeof check but have no id)
console.log(hasId("id"));       // false

typeof tidak bisa membedakan array, date, map, dan object biasa: semuanya "object". Pakai Array.isArray(x) untuk array dan x instanceof Date untuk instance class. Baik typeof maupun cara lain tidak bisa memeriksa apakah sebuah nilai cocok dengan interface saat runtime, karena interface dihapus saat kompilasi; untuk itu, tulis fungsi type guard yang memeriksa property-nya.

typeof di Posisi Tipe

Di dalam tipe, typeof someVariable menyalin tipe yang disimpulkan TypeScript (atau yang kamu deklarasikan) untuk variabel itu. Cara ini menghemat penulisan tipe dengan tangan untuk nilai yang sudah ada, dan menjaga keduanya tetap sinkron.

const theme = {
  primary: "#3178c6",
  spacing: 8,
  dark: false,
};

type Theme = typeof theme;
// { primary: string; spacing: number; dark: boolean }

function withSpacing(t: Theme, factor: number): Theme {
  return { ...t, spacing: t.spacing * factor };
}

console.log(withSpacing(theme, 2)); // { primary: '#3178c6', spacing: 16, dark: false }

let userName = "Ada";
const fixed = "Ada";
type A = typeof userName; // string
type B = typeof fixed;    // "Ada" (a const keeps its literal type)

Hasilnya tergantung pada cara variabel dideklarasikan: let atau property object dilebarkan (string, number), sedangkan primitif const mempertahankan tipe literalnya. Tambahkan as const pada object atau array, dan typeof menghasilkan tipe literal readonly sampai ke tingkat terdalam. typeof juga menerima akses property, typeof theme.spacing adalah number, tetapi tidak menerima sembarang ekspresi: type T = typeof getTheme(); adalah syntax error (';' expected., TS1005). Untuk tipe yang dikembalikan sebuah pemanggilan, pakai ReturnType<typeof getTheme>.

keyof typeof: Key Object sebagai Tipe

keyof typeof obj adalah kombinasi yang paling umum. typeof mengubah object menjadi tipe, keyof mengambil key-nya, dan kamu mendapat union dari nama-nama property yang tetap benar ketika object itu berubah.

const prices = { apple: 1.2, pear: 0.8, kiwi: 0.5 };

type Fruit = keyof typeof prices; // "apple" | "pear" | "kiwi"

function priceOf(fruit: Fruit, quantity: number): string {
  return (prices[fruit] * quantity).toFixed(2);
}

console.log(priceOf("pear", 3)); // 2.40

// @ts-expect-error: Argument of type '"mango"' is not assignable to parameter of type '"apple" | "kiwi" | "pear"'.
priceOf("mango", 1);

Trik yang sama pada array konstan menghasilkan union dari nilai-nilainya: dengan const roles = ["admin", "editor"] as const, tipe (typeof roles)[number] adalah "admin" | "editor". Tanpa as const, tipenya hanya string. Halaman keyof membahas keyof secara terpisah.

ReturnType<typeof fn> dan typeof pada Class

Utility type seperti ReturnType dan Parameters menerima tipe fungsi. Nama fungsi adalah sebuah nilai, jadi lewatkan dulu melalui typeof:

function createUser(name: string, admin = false) {
  return { id: name.toLowerCase(), name, admin };
}

type User = ReturnType<typeof createUser>;
// { id: string; name: string; admin: boolean }
type CreateArgs = Parameters<typeof createUser>;
// [name: string, admin?: boolean | undefined]

const args: CreateArgs = ["Grace", true];
const user: User = createUser(...args);
console.log(user); // { id: 'grace', name: 'Grace', admin: true }

Menulis ReturnType<createUser> gagal dengan 'createUser' refers to a value, but is being used as a type here. Did you mean 'typeof createUser'? (TS2749), dan itu adalah compiler yang meminta persis bentuk ini.

Class adalah satu-satunya kasus di mana sebuah nama sekaligus merupakan nilai dan tipe. User sebagai tipe berarti instance dari class itu; typeof User berarti class-nya sendiri, yaitu constructor, termasuk member static-nya:

class Point {
  static origin = new Point(0, 0);
  constructor(public x: number, public y: number) {}
}

const p: Point = new Point(1, 2);        // an instance
const Ctor: typeof Point = Point;        // the class (constructor + statics)
const q = new Ctor(3, 4);                // q: Point
type Instance = InstanceType<typeof Point>; // Point

typeof vs instanceof vs Type Guard

Pilih alat paling sempit yang cocok. Untuk instance class, lihat instanceof; untuk bentuk yang dijelaskan oleh interface, fungsi type guard adalah satu-satunya pemeriksaan runtime yang tersedia.