Belajar TypeScript: dari instalasi sampai generics

TypeScript adalah JavaScript + sistem tipe. Sekali terbiasa, rasanya seperti punya reviewer yang memeriksa kodemu sebelum dijalankan. Tutorial ini jalur yang kupakai sendiri — dari instalasi sampai pola yang benar-benar terpakai di project (termasuk situs ini, yang 100% TypeScript).

1. Instalasi

Prasyarat: Node.js 20+. Lalu:

npm install -D typescript
npx tsc --init          # membuat tsconfig.json

Konfigurasi minimum yang kusarankan untuk project baru:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,            // nyalakan dari hari pertama — ini intinya TS
    "noEmit": true             // biarkan bundler (Vite/esbuild) yang transpile
  },
  "include": ["src"]
}

Cek tipe kapan pun dengan npx tsc --noEmit — di project-ku ini selalu jadi script npm run typecheck.

2. Tipe dasar yang menutup 90% kebutuhan

// Anotasi eksplisit hanya saat TS tidak bisa menebak
let nama: string = "Alif";        // ❌ berlebihan — TS sudah tahu dari nilainya
let nama2 = "Alif";               // ✅ inference bekerja

// Interface untuk bentuk objek
interface Produk {
  id: number;
  nama: string;
  harga: number;
  diskon?: number;                // opsional
}

// Union type — nilai yang hanya boleh salah satu
type Status = "draft" | "published";

function publikasikan(p: Produk, status: Status) {
  if (status === "published") { /* TS tahu status pasti "published" di sini */ }
}

3. Generics — sekali paham, ketagihan

Generics = fungsi/tipe yang “menunda” keputusan tipenya ke pemanggil:

function pertama<T>(arr: T[]): T | undefined {
  return arr[0];
}

const p = pertama([{ id: 1, nama: "Kopi", harga: 25000 }]);
// p bertipe Produk | undefined — tanpa cast, tanpa any

Contoh nyata dari situs ini — resolver dictionary i18n yang mengubah node terjemahan jadi string tapi mempertahankan bentuk objeknya:

type Resolved<T> = T extends { nodeType: string } ? string
  : T extends readonly (infer U)[] ? Resolved<U>[]
  : T extends object ? { [K in keyof T]: Resolved<T[K]> } : T;

4. Migrasi bertahap dari JavaScript

Tidak perlu rewrite. Di tsconfig.json set "allowJs": true, ganti file per file dari .js ke .ts, dan perbaiki error yang muncul. Prioritaskan file yang paling sering berubah — di situlah tipe paling banyak menyelamatkanmu.

Tips dari pengalaman

• strict: true tidak bisa ditawar. TS tanpa strict cuma JS dengan langkah build ekstra.
• Hindari any; pakai unknown. unknown memaksamu mengecek dulu sebelum memakai — any mematikan seluruh manfaat TS.
• Biarkan inference bekerja. Anotasi berlebihan bikin kode berisik; anotasikan parameter fungsi dan nilai balik API publik, sisanya biarkan TS menebak.
• Tipe adalah dokumentasi yang tidak pernah basi — interface Produk di atas menjelaskan dirinya sendiri ke developer berikutnya.