tsconfig.json, Mode Strict & Alur Kerja Proyek

tsconfig.json: pusat pengaturan

Saat kamu menjalankan npx tsc --init, TypeScript membuat berkas tsconfig.json yang mengatur bagaimana kode diperiksa dan dikompilasi. Berkas ini juga dibaca editor (VS Code) sehingga pesan error di editor sama dengan hasil tsc.

{
  "compilerOptions": {
    "target": "ES2022",              // versi JavaScript hasil kompilasi
    "module": "ESNext",              // sistem modul keluaran
    "moduleResolution": "Bundler",   // cara mencari modul (Bundler / NodeNext)
    "lib": ["ES2022", "DOM"],        // tipe bawaan yang tersedia (DOM untuk browser)
    "strict": true,                  // ⭐ paket pemeriksaan ketat
    "esModuleInterop": true,
    "skipLibCheck": true,            // lewati pemeriksaan .d.ts pustaka (build lebih cepat)
    "outDir": "./dist",              // folder hasil .js
    "rootDir": "./src",              // folder sumber .ts
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }    // alias import
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

"strict": true — wajib untuk proyek baru

strict menyalakan sekumpulan pemeriksaan sekaligus. Yang terpenting:

Flag tambahan yang disarankan

"noUncheckedIndexedAccess": true,   // arr[0] bertipe T | undefined (jujur: indeks bisa di luar batas)
"noImplicitReturns": true,          // semua jalur harus return
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"exactOptionalPropertyTypes": true,
"verbatimModuleSyntax": true        // impor tipe wajib pakai 'import type'

noUncheckedIndexedAccess terasa merepotkan di awal tetapi menutup sumber bug yang sangat umum:

const arr = [1, 2, 3]
const x = arr[10]      // tanpa flag: number (padahal undefined!)  — dengan flag: number | undefined

Alur kerja proyek

1. Menulis: editor memberi garis merah real-time (memakai tsconfig yang sama).
2. Memeriksa tipe saja: npx tsc --noEmit — cepat, tanpa membuat berkas. Biasanya dijalankan di CI.
3. Menjalankan saat pengembangan: npx tsx src/index.ts (atau ts-node) menjalankan TS langsung; tsx watch memuat ulang otomatis.
4. Build produksi: npx tsc menghasilkan JavaScript ke dist/; proyek frontend memakai bundler (Vite, esbuild) yang menghapus tipe sangat cepat — pemeriksaan tipenya tetap lewat tsc --noEmit.

// package.json (cuplikan)
"scripts": {
  "dev": "tsx watch src/index.ts",
  "typecheck": "tsc --noEmit",
  "build": "tsc",
  "start": "node dist/index.js"
}

Linter dan formatter

TypeScript menangkap kesalahan tipe; ESLint (dengan typescript-eslint) menangkap pola berisiko lain (mis. promise tidak di-await, any berlebihan). Prettier merapikan format. Ketiganya saling melengkapi.

Bermigrasi dari JavaScript secara bertahap

• Nyalakan "allowJs": true agar file .js dan .ts hidup berdampingan.
• Nyalakan "checkJs": true untuk mulai memeriksa .js (tipe lewat komentar JSDoc).
• Ubah file satu per satu menjadi .ts, mulai dari file "daun" yang paling sedikit bergantung.
• Naikkan ketatnya bertahap, akhirnya strict: true.

Kesalahan umum pemula

• Menonaktifkan strict karena banyak error, bukan memperbaiki penyebabnya.
• Mengira tsc perlu dijalankan agar kode "bisa jalan" — dengan tsx/bundler tidak perlu, tetapi pemeriksaan tipe tetap penting.
• Lupa bahwa lib tanpa "DOM" membuat document dan window tidak dikenal.