Kumpulan terkurasi berisi pola TypeScript praktis yang meningkatkan safety, keterbacaan, kemudahan pemeliharaan, dan developer experience.

Sebagian besar tips ini tampak kecil bila berdiri sendiri. Namun jika digabungkan, semuanya mengubah secara drastis bagaimana rasanya bekerja dengan kode TypeScript.

Daftar Isi

1. Utamakan unknown Dibanding any
2. Biarkan Type Inference Bekerja
3. Utamakan satisfies Dibanding as
4. Turunkan Type dari Value
5. Modelkan State Mustahil dengan Discriminated Union
6. Gunakan Exhaustive Check dengan never
7. Gunakan as const untuk Konstanta
8. Gunakan Type Predicate
9. Bangun Type dari Type yang Sudah Ada
10. Validasi Data Eksternal saat Runtime
11. Hindari enum pada Sebagian Besar Kasus
12. Utamakan Generic yang Dapat Diinferensi
13. Aktifkan Opsi Compiler yang Strict
14. Pelajari Template Literal Type
15. Type-Safe ≠ Runtime-Safe

Utamakan unknown Dibanding any

Banyak hal soal type safety bermula di sini.

Sebagian besar masalah TypeScript dimulai ketika any masuk ke dalam sistem.

function parse(data: unknown) {
  if (typeof data === "string") {
    return data.toUpperCase();
  }
}

Mengapa ini penting

• Memaksa validasi
• Menjaga safety
• Mencegah kebocoran type (type leakage)

^{Daftar Isi}

Biarkan Type Inference Bekerja

Kode TypeScript terbaik sering kali memiliki lebih sedikit type eksplisit daripada yang dibayangkan pemula.

const name = "Ada";

Alih-alih:

const name: string = "Ada";

Anotasi berlebihan

• Memperlebar type
• Mengganggu inference
• Menciptakan beban pemeliharaan (maintenance overhead)

Inference cenderung lebih mudah diskalakan dibanding anotasi.

^{Daftar Isi}

Utamakan satisfies Dibanding as

Salah satu fitur TypeScript modern yang paling penting.

const routes = {
  home: "/",
  about: "/about",
} satisfies Record<string, string>;

Alih-alih:

const routes = {
  home: "/",
  about: "/about",
} as Record<string, string>;

satisfies melakukan validasi tanpa kehilangan inference.

^{Daftar Isi}

Turunkan Type dari Value, Bukan Menduplikasinya

Salah satu pergeseran pola pikir terbesar dalam TypeScript.

const roles = ["admin", "user", "guest"] as const;

type Role = (typeof roles)[number];

Menjaga sinkronisasi antara runtime value dan type secara manual hampir selalu melenceng seiring waktu.

^{Daftar Isi}

Modelkan State Mustahil dengan Discriminated Union

Di sinilah TypeScript mulai bersifat arsitektural.

type State =
  | { status: "loading" }
  | { status: "success"; data: User }
  | { status: "error"; error: Error };

Model seperti ini cenderung jauh lebih mudah diskalakan dibanding gumpalan property opsional yang longgar.

^{Daftar Isi}

Gunakan Exhaustive Check dengan never

Discriminated union menjadi jauh lebih ampuh dengan exhaustiveness checking.

default: {
  const exhaustive: never = state;
  return exhaustive;
}

Refactor di masa depan akan menjadi error compiler, bukan bug runtime.

^{Daftar Isi}

Gunakan as const untuk Konfigurasi dan Konstanta

Tanpa as const:

const theme = {
  mode: "dark",
};

mode menjadi string.

Dengan as const:

const theme = {
  mode: "dark",
} as const;

Kini nilainya menjadi 'dark'.

Fitur kecil, manfaat besar.

^{Daftar Isi}

Gunakan Type Predicate untuk Narrowing yang Dapat Dipakai Ulang

Hubungkan pengecekan runtime dengan kecerdasan compile-time.

function isUser(value: unknown): value is User {
  return typeof value === "object" && value !== null && "id" in value;
}

Lalu:

if (isUser(data)) {
  data.id;
}

Hal ini menjadi sangat berguna di sekitar API dan batas input eksternal.

^{Daftar Isi}

Bangun Type Baru dari Type yang Sudah Ada

Berpikirlah dalam kerangka transformasi, bukan duplikasi.

type UserPreview = Pick<User, "id" | "name">;

Pelajari utility type berikut

• Pick
• Omit
• Partial
• Required
• Indexed access types

Utility ini menjadi jauh lebih bernilai seiring bertumbuhnya aplikasi.

^{Daftar Isi}

Validasi Data Eksternal saat Runtime

TypeScript tidak memvalidasi response API.

Ini adalah salah satu bagian TypeScript yang paling sering disalahpahami.

const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
});

Type safety berakhir di batas runtime kecuali Anda melakukan validasi.

^{Daftar Isi}

Hindari enum pada Sebagian Besar Kasus

Biasanya lebih sederhana:

const roles = ["admin", "user"] as const;

Dibanding:

enum Role {
  Admin,
  User,
}

Pada sebagian besar aplikasi, literal union pada akhirnya lebih sederhana untuk di-refactor, lebih mudah diserialisasi, dan tidak terlalu mengejutkan saat runtime dibanding enum.

^{Daftar Isi}

Utamakan Generic yang Dapat Diinferensi Otomatis

API TypeScript yang baik jarang membutuhkan argumen generic manual.

Kurang ideal:

getData<User>();

Lebih baik:

getData(userSchema);

Inference biasanya lebih mudah diskalakan dibanding API yang padat anotasi.

^{Daftar Isi}

Aktifkan Opsi Compiler yang Strict

Banyak tim menggunakan TypeScript dalam "mode autocomplete".

Strict mode adalah titik ketika TypeScript benar-benar mulai membuahkan hasil.

{
  "strict": true,
  "noUncheckedIndexedAccess": true,
  "exactOptionalPropertyTypes": true
}

Flag-flag ini meningkatkan correctness secara drastis.

^{Daftar Isi}

Pelajari Template Literal Type

Salah satu fitur TypeScript modern yang paling ampuh.

type Route = `/api/${string}`;

Sangat cocok untuk:

• Route
• Nama event
• Utility CSS
• Design system
• Query key

Begitu Anda mulai menggunakannya, fitur ini akan muncul di mana-mana.

^{Daftar Isi}

"Type-Safe" Tidak Berarti "Runtime-Safe"

Tips penutup yang sempurna karena membingkai ulang segalanya.

Kode ini berhasil dikompilasi:

const user = (await response.json()) as User;

Tetapi tetap bisa meledak saat runtime.

TypeScript meningkatkan correctness, tetapi:

• Tidak menggantikan validasi
• Tidak menjamin arsitektur yang baik
• Tidak menghilangkan bug runtime

Perbedaan ini menjadi semakin penting pada sistem yang lebih besar.

^{Daftar Isi}