Best Practice TypeScript: 8 Aturan, Sebelum dan Sesudah

Aturan di bawah ini adalah aturan yang paling banyak mencegah bug di kode TypeScript sungguhan. Masing-masing menunjukkan versi yang umum lebih dulu, lalu versi yang lebih baik, dalam kode yang bisa kamu jalankan. Aturan pertama yang paling penting: berhenti memakai any.

Pakai unknown, Bukan any

any mematikan pemeriksaan tipe untuk sebuah nilai dan semua yang dihitung darinya. unknown juga menerima nilai apa pun, tetapi kamu wajib memeriksanya sebelum dipakai, sehingga pemeriksaan terjadi di tempat data masuk ke programmu:

// Before: any switches off checking for everything it touches.
function totalAny(items: any): number {
  return items.reduce((sum: number, item: any) => sum + item.price, 0);
}
console.log(totalAny([{ price: 2 }, { cost: 3 }])); // NaN, no error anywhere

// After: take unknown, check once at the boundary, then work with real types.
interface Item {
  price: number;
}

function isItems(value: unknown): value is Item[] {
  return Array.isArray(value) && value.every((i) => typeof i?.price === "number");
}

function total(input: unknown): number {
  if (!isItems(input)) throw new Error("Expected a list of items with prices");
  return input.reduce((sum, item) => sum + item.price, 0);
}

console.log(total([{ price: 2 }, { price: 3 }])); // 5
try {
  total([{ price: 2 }, { cost: 3 }]);
} catch (e) {
  console.log(e instanceof Error ? e.message : e); // Expected a list of items with prices
}

Batasnya adalah tempat-tempat di mana tipe tidak lagi dijamin: JSON.parse, respons fetch, localStorage, input form, environment variable, dan pesan dari proses lain. Validasi di sana dengan type guard atau library skema, dan sisa kodenya bisa memercayai tipenya.

Biarkan strict Menyala

strict adalah default di TypeScript 7; jangan dimatikan. Tambahkan pemeriksaan yang tidak tercakup olehnya tetapi paling banyak menangkap bug:

{
    "compilerOptions": {
        "strict": true,
        "noUncheckedIndexedAccess": true,
        "noImplicitOverride": true,
        "noFallthroughCasesInSwitch": true
    }
}

noUncheckedIndexedAccess membuat arr[i] dan record[key] menyertakan undefined, yang memang dikembalikan untuk index yang tidak ada. noImplicitOverride mewajibkan method subclass menulis override, dan noFallthroughCasesInSwitch menolak case yang langsung berlanjut ke case berikutnya.

Biarkan Inferensi Bekerja

Beri anotasi pada hal yang tidak bisa diketahui TypeScript: parameter fungsi, dan tipe kembalian fungsi yang dipakai modul lain. Serahkan variabel lokal dan parameter callback ke inferensi. Anotasi yang tidak perlu bukan sekadar mengganggu; anotasi itu bisa membuat tipe lebih lebar daripada nilainya:

type Status = "active" | "banned";

function setStatus(status: Status): string {
  return `status set to ${status}`;
}

const annotated: string = "active"; // annotation widens the type to string
// @ts-expect-error string is not assignable to Status
setStatus(annotated);

const inferred = "active"; // inferred as the literal type "active"
console.log(setStatus(inferred)); // status set to active

const users = [{ id: 1, name: "Ada" }, { id: 2, name: "Lin" }];
const ids = users.map((u) => u.id); // inferred: number[]
console.log(ids); // [ 1, 2 ]

Tanpa komentar @ts-expect-error, setStatus(annotated) menghasilkan error TS2345. const yang disimpulkan tetap memegang tipe literal "active", jadi diterima. Arahkan kursor ke variabel di editormu untuk melihat hasil inferensinya sebelum kamu menambahkan tipe.

Pilih Union Type daripada Enum

Union berisi string literal memberikan autocomplete dan pemeriksaan menyeluruh tanpa kode yang dihasilkan. Kalau kamu juga butuh daftar nilainya saat runtime, turunkan tipenya dari array as const:

const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number]; // "admin" | "editor" | "viewer"

function canEdit(role: Role): boolean {
  return role !== "viewer";
}

console.log(canEdit("editor"));     // true
console.log(ROLES.filter(canEdit)); // [ 'admin', 'editor' ]

canEdit("owner"); // error TS2345: Argument of type '"owner"' is not assignable to parameter of type '"admin" | "editor" | "viewer"'.

enum Role { Admin, Viewer } dikompilasi menjadi objek dengan reverse mapping, dan parameter enum numerik menerima variabel number apa pun, bahkan yang berisi nilai yang tidak tercantum di enum. Enum juga tidak bisa berjalan dengan type stripping milik Node (TypeScript enum is not supported in strip-only mode). Untung ruginya dibandingkan di halaman enum.

Periksa Objek Config dengan satisfies

Memberi anotasi tipe yang lebar seperti Record<string, Route> pada sebuah objek memang memeriksa nilainya, tetapi melupakan key-nya. satisfies memeriksa hal yang sama dan tetap menyimpan tipe persisnya:

interface Route {
  path: string;
  auth: boolean;
}

// Annotated: every string key is allowed, so typos are not caught.
const loose: Record<string, Route> = {
  home: { path: "/", auth: false },
};
console.log(loose.hmoe); // undefined, and no compile error

// satisfies: checked against Route, but the exact keys are kept.
const routes = {
  home: { path: "/", auth: false },
  admin: { path: "/admin", auth: true },
} satisfies Record<string, Route>;

console.log(routes.admin.path); // /admin
// @ts-expect-error Property 'hmoe' does not exist
routes.hmoe;

Pakai anotasi kalau variabel itu harus punya tipe persis seperti yang dideklarasikan (parameter fungsi, nilai yang akan kamu beri nilai ulang). Pakai satisfies untuk tabel lookup, peta route, token tema, dan objek konstan lainnya.

Modelkan State dengan Discriminated Union

Satu objek dengan field opsional mengizinkan state yang mustahil terjadi: loading: true bersamaan dengan error, atau data yang tidak ada setelah sukses. Union berisi objek dengan tag bersama hanya mengizinkan state yang nyata, dan setiap cabang hanya melihat field miliknya sendiri:

type RequestState =
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "error"; message: string };

function render(state: RequestState): string {
  switch (state.status) {
    case "loading":
      return "Loading...";
    case "success":
      return state.data.join(", "); // data exists only here
    case "error":
      return `Error: ${state.message}`;
    default: {
      const unreachable: never = state; // fails if a case is missing
      return unreachable;
    }
  }
}

console.log(render({ status: "success", data: ["a", "b"] })); // a, b
console.log(render({ status: "error", message: "timeout" }));  // Error: timeout

Baris never adalah pemeriksaan menyeluruh. Kalau seseorang menambahkan state dan lupa menanganinya, build gagal di baris itu:

// This does not compile: a new state was added but not handled.
type RequestState =
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "cancelled" };

function render(state: RequestState): string {
  switch (state.status) {
    case "loading":
      return "Loading...";
    case "success":
      return state.data.join(", ");
    default: {
      const unreachable: never = state;
      return unreachable;
    }
  }
}

console.log(render({ status: "loading" }));

Error-nya adalah index.ts(14,13): error TS2322: Type '{ status: "cancelled"; }' is not assignable to type 'never'. Error ini menyebutkan case yang belum ditangani. Tambahkan case "cancelled": dan kodenya bisa dikompilasi.

Hindari ! dan as

Non-null assertion x! dan type assertion x as T menyuruh compiler berhenti memeriksa. Keduanya tidak mengubah nilai saat runtime, jadi assertion yang salah berubah menjadi crash di kemudian hari, jauh dari penyebabnya:

interface User {
  name: string;
}

const users = new Map<string, User>([["ada", { name: "Ada" }]]);

// Before: ! and as silence the compiler, and the crash moves to run time.
try {
  console.log(users.get("bob")!.name);
} catch (e) {
  console.log(e instanceof Error ? e.message : e); // Cannot read properties of undefined (reading 'name')
}
const fake = {} as User;
console.log(fake.name); // undefined, typed as string

// After: handle the missing case where it can happen.
const bob = users.get("bob");
console.log(bob?.name ?? "unknown user"); // unknown user

Ganti ! dengan ?., ??, return lebih awal, atau error yang dilempar dengan pesan yang berguna. Ganti as dengan type guard yang benar-benar menguji nilainya. Satu-satunya assertion yang selalu aman adalah as const, karena hanya membuat tipe lebih sempit dan read-only. Pengaturan lint yang baik (no-non-null-assertion dan no-explicit-any dari typescript-eslint) menandai sisanya.

Jadikan Data readonly

Tandai property dan array dengan readonly kalau kode tidak boleh mengubahnya. Compiler lalu menolak push, sort, dan penugasan, dan fungsi mengembalikan nilai baru alih-alih mengubah input-nya:

interface Settings {
  readonly theme: "light" | "dark";
  readonly tags: readonly string[];
}

function withTag(settings: Settings, tag: string): Settings {
  // settings.tags.push(tag) would not compile
  return { ...settings, tags: [...settings.tags, tag] };
}

const before: Settings = { theme: "dark", tags: ["a"] };
const after = withTag(before, "b");
console.log(before.tags, after.tags); // [ 'a' ] [ 'a', 'b' ]

// @ts-expect-error Cannot assign to 'theme' because it is a read-only property.
before.theme = "light";

readonly hanya diperiksa saat kompilasi dan hanya sedalam satu tingkat: modifier ini tidak membekukan objek saat runtime. Meski begitu, itu sudah cukup untuk menangkap perubahan tidak sengaja pada state bersama, penyebab sebagian besar bug jenis ini.