tsconfigkonfigurasisetupPemula3 mnt baca

tsconfig Dasar

Opsi penting di tsconfig.json: target, module, outDir, rootDir, dan include.

Analogi: Panel Pengaturan Game

Sebelum main game, kamu buka menu Settings: atur resolusi, volume, tingkat kesulitan. Kamu tidak mengatur ulang setiap kali mulai main, cukup sekali dan tersimpan. tsconfig.json adalah menu Settings untuk compiler TypeScript: ditulis sekali, dipakai setiap kali tsc berjalan.

Tanpa file ini, tsc berjalan dengan setting default yang polos: hasil compile berserakan di sebelah file source, dan pengecekan tidak seketat yang kamu mau. Lima menit mengatur tsconfig menghemat berjam-jam kerapian project.

Kenapa tsconfig Ada?

Compiler butuh jawaban atas banyak pertanyaan: file mana yang dikompilasi? Hasilnya ditaruh di mana? Jadi JavaScript versi berapa? Seberapa ketat pemeriksaannya? Tanpa tsconfig, kamu harus mengetik semua jawaban itu sebagai flag command line setiap kali compile, misalnya npx tsc --target ES2020 --module commonjs --outDir dist --rootDir src --strict. Capek dan gampang lupa.

Dengan tsconfig, cukup ketik npx tsc dan compiler membaca semua jawaban dari file. Bonusnya: editor seperti VS Code juga membaca file yang sama, jadi error yang kamu lihat di editor persis sama dengan error di terminal. Satu sumber kebenaran.

Contoh 1: tsconfig Minimal yang Sehat

Ini konfigurasi awal yang cukup untuk hampir semua project pemula:

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true
  },
  "include": ["src"]
}

Artinya dalam bahasa manusia: ambil semua file TypeScript di folder src, terjemahkan menjadi JavaScript versi ES2020, dan taruh hasilnya di folder dist dengan struktur folder yang sama. Nyalakan semua pemeriksaan ketat.

Struktur project-nya jadi rapi:

project/
  src/
    index.ts
    util.ts
  dist/
    index.js
    util.js

Contoh 2: Menyesuaikan target dan module dengan Lingkungan

Opsi target dan module bukan sekadar formalitas, mereka menentukan apakah output bisa jalan di tempat tujuan:

json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "noEmitOnError": true
  },
  "include": ["src"]
}

Pakai module: CommonJS kalau output dijalankan langsung oleh Node.js tanpa bundler (karena Node klasik memakai require). Pakai ESNext kalau ada bundler seperti Vite atau Next.js yang mengurus modulnya sendiri. noEmitOnError: true menghentikan output kalau ada type error, cocok untuk CI agar kode merah tidak lolos ke production.

Contoh Nyata: Error Compiler Beraksi

Salah satu error tsconfig paling terkenal terjadi saat rootDir tidak mencakup semua file:

json

{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src", "tools/helper.ts"]
}

File tools/helper.ts berada di luar rootDir (src), maka compiler protes:

error TS6059: File '/project/tools/helper.ts' is not under 'rootDir' '/project/src'.
'rootDir' is expected to contain all source files.

Pesan ini sebenarnya membantu: ia memaksamu memutuskan struktur yang konsisten. Solusinya: pindahkan helper ke dalam src, atau longgarkan rootDir ke folder project. Jangan asal hapus rootDir karena tanpanya struktur folder output bisa berantakan.

Kesalahan Umum Pemula

1. Tidak menyetel outDir dan rootDir

json

// SALAH: tsconfig tanpa outDir/rootDir
{
  "compilerOptions": { "strict": true },
  "include": ["src"]
}
// Hasil: src/index.js berserakan di sebelah src/index.ts.
// Repot saat deploy, repot saat .gitignore.

// BENAR: selalu pasang keduanya
{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "strict": true
  },
  "include": ["src"]
}

2. Salah pilih module untuk Node.js polos

json

// SALAH: module ESNext tapi dijalankan langsung dengan node versi lama
// "module": "ESNext"  ->  output pakai import/export
// node lama: SyntaxError: Cannot use import statement outside a module

// BENAR: untuk Node tanpa bundler, pakai CommonJS
// "module": "CommonJS"  ->  output pakai require/module.exports
// Atau pakai Node modern dengan "type": "module" di package.json.

3. Lupa include sehingga tsc mengkompilasi hal yang tidak diinginkan

json

// SALAH: tanpa "include", tsc mengkompilasi SEMUA .ts di project,
// termasuk file contoh, file test, atau file di folder aneh.

// BENAR: batasi dengan include (dan exclude kalau perlu)
{
  "compilerOptions": { "outDir": "dist", "rootDir": "src", "strict": true },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Catatan teknis: npx tsc --init menghasilkan tsconfig dengan puluhan opsi yang semuanya di-comment. Kamu tidak perlu memahami semuanya sekarang. Fokus ke lima yang dibahas di sini (target, module, outDir, rootDir, strict), sisanya bisa dipelajari saat benar-benar dibutuhkan.

Tantangan

Rapikan output

Buat struktur src/app.ts, lalu tulis tsconfig.json dengan rootDir: src, outDir: dist, target: ES2020, dan include: ["src"]. Jalankan npx tsc dan pastikan hasilnya muncul di dist/app.js, bukan di sebelah app.ts.

typescript

// src/app.ts
const pesan: string = "Halo tsconfig";
console.log(pesan);