Tutorial Konfigurasi tsconfig.json untuk Pemula

Pendahuluan

Pernahkah kamu membuka proyek TypeScript dan menemukan file bernama tsconf tsconfig.json` di root direktori, lalu bertanya-tanya, “File ini buat apa apa sih?” Kamu tidak sendirian. Banyak developer pemula yang langsung meng mengabaikan file ini dan hanya berharap semuanya berjalan dengan sendirinya sendirinya.

Bayangkan tsconfig.json seperti pengaturan mesin pabrik. Kalau kamu p punya pabrik roti, kamu bisa atur suhu oven, lama pemanggangan, dan jenis t tepung yang dipakai. Nah, tsconfig.json adalah panel kontrol yang memberi memberitahu kompiler TypeScript: “Hei, kompilasi kode ini dengan aturan se seperti ini.”

Tanpa konfigurasi yang tepat, TypeScript mungkin terlalu ketat sehingga mem membuat kamu frustrasi, atau terlalu longgar sehingga manfaat utamanya — ke keamanan tipe — tidak terasa. Artikel ini akan memandu kamu memahami dan me mengkonfigurasi tsconfig.json dari nol dengan bahasa yang mudah dipahami. dipahami.

Sebelum lanjut, pastikan kamu sudah mengenal dasar TypeScript. Kalau belum, belum, baca dulu artikel [Belajar JavaScript dari Nol: Panduan Pemula untuk untuk Web Developer](/docs/sw/javascript/belajar-javascript-dari-nol-panduaK Developer un untuk membangun fondasi JavaScript-mu terlebih dahulu, karena TypeScript ad adalah superset-nya.

Konsep Dasar

Apa Itu tsconfig.json?

tsconfig.json adalah file konfigurasi untuk **TypeScript Compiler (tsc) (tsc). File ini ditulis dalam format JSON dan berada di root direktori pr proyekmu. Ketika kamu menjalankan perintah tsc, kompiler akan otomatis me mencari file ini untuk mengetahui bagaimana cara mengompilasi kode TypeScri TypeScript-mu menjadi JavaScript.

Untuk membuat file ini dari awal, jalankan:

# Membuat folder proyek TypeScript sederhana
mkdir -p belajar-typescript
cd belajar-typescript

# Membuat file package.json secara otomatis
npm init -y > /dev/null

# Menginstal TypeScript sebagai dependency pengembangan
npm install --save-dev typescript > /dev/null

# Membuat file konfigurasi TypeScript: tsconfig.json
npx tsc --init > /dev/null

# Menampilkan pesan jika konfigurasi berhasil dibuat
echo "tsconfig.json berhasil dibuat"

# Output yang diharapkan:
# > tsconfig.json berhasil dibuat

Perintah ini akan menghasilkan file tsconfig.json dengan banyak opsi yang yang sudah dikomentari. Hasilnya seperti buku panduan lengkap — kebanyakan  dikomentari, tapi semuanya tersedia kalau kamu butuh.

Struktur Dasar tsconfig.json

Secara garis besar, tsconfig.json punya dua bagian utama:

{
  // Pengaturan utama untuk kompiler TypeScript
  "compilerOptions": {
    // Mengubah TypeScript menjadi JavaScript versi ES2020
    "target": "ES2020",

    // Menggunakan format module yang umum dipakai di Node.js
    "module": "CommonJS",

    // Folder hasil kompilasi JavaScript
    "outDir": "dist",

    // Folder sumber file TypeScript
    "rootDir": "src",

    // Mengaktifkan pengecekan tipe yang lebih ketat
    "strict": true
  },

  // File TypeScript yang akan dikompilasi
  "include": ["src/**/*.ts"],

  // Folder yang tidak ikut dikompilasi
  "exclude": ["node_modules", "dist"]

  // Output yang diharapkan:
  // > File TypeScript dari folder src berhasil dikompilasi
  // > File JavaScript hasil kompilasi tersimpan di folder dist
}

• compilerOptions: Tempat semua pengaturan kompiler berada — ini bagi bagian terpenting.
• include: Daftar folder/file yang dimasukkan dalam proses kompil kompilasi.
• exclude: Daftar folder/file yang dikecualikan.

Opsi-Opsi Penting di compilerOptions

Mari kita bahas satu per satu opsi yang paling sering digunakan:

1. target — Output JavaScript Versi Berapa?

{
  "// komentar": "File tsconfig.json mengatur cara TypeScript dikompilasi."
dikompilasi.",
  "compilerOptions": {
    "target": "ES2020"
  },
  "// Output yang diharapkan:": "",
  "// > TypeScript akan dikompilasi ke JavaScript versi ES2020.": "",
  "// > Konfigurasi ini siap digunakan dengan perintah tsc.": ""
}

Opsi ini menentukan versi JavaScript yang dihasilkan. Analoginya seperti ** format file video — kamu punya video 4K tapi perlu mengekspornya ke for format yang kompatibel dengan TV lama. Kalau proyekmu harus berjalan di bro browser lama, pilih ES5 atau ES6. Untuk proyek modern, ES2020 atau E ESNext` sudah aman.

Nilai yang umum digunakan:

• ES5 — Kompatibel dengan hampir semua browser lama
• ES6 / ES2015 — Modern, mendukung class, arrow function, let/co let/const`
• ES2020 — Mendukung optional chaining (?.), nullish coalescing (??)
• ESNext — Versi JavaScript terbaru yang tersedia

2. module — Sistem Modul yang Digunakan

{
  "// komentar": "Konfigurasi dasar TypeScript untuk proyek pemula",
  "compilerOptions": {
    "// komentar module": "Menggunakan CommonJS agar hasil JavaScript bisa 
dijalankan dengan Node.js",
    "module": "CommonJS",
    "// komentar target": "Mengubah TypeScript menjadi JavaScript versi ES2
ES2020",
    "target": "ES2020",
    "// komentar outDir": "Folder tempat hasil kompilasi disimpan",
    "outDir": "./dist",
    "// komentar strict": "Membantu menemukan error tipe data sejak awal",
    "strict": true
  },
  "// Output yang diharapkan": [
    "> TypeScript berhasil dikompilasi",
    "> File JavaScript tersimpan di folder dist"
  ]
}

Opsi ini mengatur bagaimana TypeScript menghasilkan kode untuk import/ex import/export`.

• CommonJS — Untuk Node.js (require() / module.exports)
• ESModule / ES2020 — Untuk browser modern atau bundler seperti Vite/We Vite/Webpack
• NodeNext — Untuk Node.js versi terbaru dengan dukungan ESM native

3. strict — Mode Ketat

{
  "// komentar": "File tsconfig.json untuk mengatur kompilasi TypeScript",
  "compilerOptions": {
    "// komentar strict": "true membuat TypeScript memeriksa tipe data lebi
lebih ketat",
    "strict": true
  },
  "// Output yang diharapkan:": [
    "> TypeScript strict mode aktif",
    "> Kesalahan tipe akan lebih mudah ditemukan"
  ]
}

Ini adalah tombol super penting. Ketika strict: true, TypeScript meng mengaktifkan serangkaian pemeriksaan ketat sekaligus:

• strictNullChecks — Tidak boleh assign null/undefined ke tipe lain t tanpa izin
• noImplicitAny — Tidak boleh ada tipe any yang tidak dideklarasikan se secara eksplisit
• strictFunctionTypes — Memeriksa tipe parameter fungsi secara lebih keta ketat

Untuk pemula, mengaktifkan strict: true memang bisa terasa menyiksa di aw awal, tapi ini yang membuat TypeScript benar-benar berguna. Anggap saja sep seperti sabuk pengaman — ribet dipasang, tapi sangat melindungi.

4. outDir dan rootDir — Atur Struktur Folder

{
  "// komentar": "Simpan sebagai tsconfig.json di root project.",
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true
  },
  "include": ["src/**/*"],
  "// Output yang diharapkan:": "",
  "// > File TypeScript dari folder src akan dikompilasi": "",
  "// > Hasil JavaScript akan tersimpan di folder dist": ""
}

• rootDir: Di mana file TypeScript sumber berada
• outDir: Di mana file JavaScript hasil kompilasi disimpan

Dengan konfigurasi ini, TypeScript akan membaca semua .ts dari folder sr src/dan menghasilkan file.jske folderdist/` dengan struktur folder folder yang sama.

5. lib — Library Bawaan yang Tersedia

{
  "$comment": "# tsconfig.json ini mengatur cara TypeScript dikompilasi",
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "strict": true,
    "outDir": "dist"
  },
  "include": ["src/**/*.ts"],
  "$output": [
    "# Output yang diharapkan:",
    "# > TypeScript berhasil dikompilasi",
    "# > File JavaScript tersimpan di folder dist"
  ]
}

Opsi ini memberitahu TypeScript library mana yang tersedia di lingkungan ru runtime-mu. DOM dibutuhkan kalau kamu mengakses document, window, ata atau API browser lainnya. Kalau kamu hanya membuat aplikasi Node.js, DOM  tidak perlu dimasukkan.

6. paths — Alias Import

{
  "// komentar": "Simpan konfigurasi ini sebagai tsconfig.json agar TypeScr
TypeScript mengenali alias import.",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "// Output yang diharapkan:": "",
  "// > import Button from '@components/Button' dapat dikenali oleh TypeScr
TypeScript": "",
  "// > import formatDate from '@utils/formatDate' dapat dikenali oleh Type
TypeScript": ""
}

Opsi ini memungkinkan kamu membuat alias untuk path import yang panjang. Da Daripada menulis import Button from '../../../components/Button', kamu bi bisa tulis import Button from '@components/Button'. Jauh lebih rapi!

Contoh Kode

Konfigurasi untuk Proyek Node.js

Ini adalah konfigurasi yang cocok untuk membuat REST API atau script backen backend dengan Node.js:

{
  "// komentar": "File tsconfig.json untuk mengatur cara TypeScript dikompi
dikompilasi",
  "compilerOptions": {
    "// target": "Mengubah TypeScript menjadi JavaScript versi ES2020",
    "target": "ES2020",

    "// module": "Menggunakan format module CommonJS, cocok untuk Node.js p
pemula",
    "module": "CommonJS",

    "// lib": "Menggunakan fitur bawaan JavaScript ES2020",
    "lib": ["ES2020"],

    "// rootDir": "Folder tempat file TypeScript ditulis",
    "rootDir": "./src",

    "// outDir": "Folder tempat hasil kompilasi disimpan",
    "outDir": "./dist",

    "// strict": "Mengaktifkan pengecekan ketat tipe data",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Konfigurasi untuk Proyek Frontend React

Ini adalah konfigurasi yang cocok untuk membuat aplikasi frontend dengan Re React:

{
  "// komentar": "File tsconfig.json untuk mengatur cara TypeScript dikompi
dikompilasi",
  "compilerOptions": {
    "// target": "Mengubah TypeScript menjadi JavaScript versi ES2018",
    "target": "ES2018",

    "// module": "Menggunakan format module ESNext, cocok untuk bundler sep
seperti Webpack atau Vite",
    "module": "ESNext",

    "// lib": "Menggunakan fitur bawaan JavaScript ES6 dan DOM",
    "lib": ["ES6", "DOM"],

    "// rootDir": "Folder tempat file TypeScript ditulis",
    "rootDir": "./src",

    "// outDir": "Folder tempat hasil kompilasi disimpan",
    "outDir": "./dist",

    "// strict": "Mengaktifkan pengecekan ketat tipe data",
    "strict": true,

    "// jsx": "Menyatakan bahwa kita akan menggunakan JSX",
    "jsx": "react"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Pertanyaan yang Sering Diajukan

Apa itu tsconfig.json dan apakah wajib ada?

tsconfig.json adalah file konfigurasi yang memberitahu kompiler TypeScrip TypeScript bagaimana cara mengompilasi proyekmu. Secara teknis tidak wajib  — kamu bisa mengoper opsi langsung ke perintah tsc — tapi untuk proyek ny nyata, file ini sangat direkomendasikan. Tanpanya, kamu harus mengetik ulan ulang semua opsi setiap kali menjalankan kompiler, yang tidak praktis sama  sekali.

Apa perbedaan module: "CommonJS" dan module: "ESNext"?

CommonJS menggunakan sintaks require() dan module.exports, yang merup merupakan standar lama Node.js. ESNext menggunakan sintaks import/expo import/exportmodern yang merupakan standar ECMAScript resmi. Untuk pro proyek Node.js tanpa bundler, gunakanCommonJS. Untuk proyek frontend den dengan Vite/Webpack, atau Node.js versi baru dengan flag —experimental-vm --experimental-vm-modules, gunakan ESNext atau NodeNext.

Mengapa strict: true penting dan apakah bisa dimatikan?

strict: true mengaktifkan serangkaian pemeriksaan ketat yang mencegah ban banyak bug umum, terutama yang berkaitan dengan null/undefined dan tipe tipe implisit any. Kamu bisa mematikannya ("strict": false), tapi itu m mengurangi manfaat utama TypeScript secara signifikan. Untuk pemula, disara disarankan tetap aktifkan dan pelajari setiap pesan error — karena TypeScri TypeScript sedang membantumu menulis kode yang lebih aman.

Bagaimana cara membuat tsconfig.json dari awal?

Cukup jalankan npx tsc --init di root direktori proyekmu. Perintah ini ak akan otomatis membuat file tsconfig.json dengan ratusan opsi yang sudah d dikomentari beserta penjelasannya. Kamu cukup uncomment dan ubah opsi yang  kamu butuhkan. Alternatif lain, kamu bisa copy-paste template dari dokument dokumentasi resmi TypeScript sesuai jenis proyekmu.

Apa yang dimaksud dengan include dan exclude di tsconfig.json?

include menentukan file atau folder mana yang diproses oleh TypeScrip TypeScript — biasanya ["src/**/*"] untuk memproses semua file di dalam fo folder src. exclude adalah kebalikannya, menentukan file yang **dilewat dilewati — node_modules dan dist selalu dieksklusi agar TypeScript  tidak memproses library pihak ketiga atau file hasil kompilasi sebelumnya.

Kesimpulan

tsconfig.json adalah jantung dari setiap proyek TypeScript. Dengan memaha memahami opsi-opsi utamanya — target, module, strict, outDir, dan  rootDir` — kamu sudah mampu mengkonfigurasi TypeScript untuk berbagai jeni jenis proyek, baik itu backend Node.js maupun frontend React.

Ingat prinsip dasarnya: mulai dengan strict: true meski awalnya terasa be berat, sesuaikan target dan module dengan lingkungan runtime proyekmu,  dan manfaatkan paths untuk membuat kode lebih bersih. Seiring bertambahny bertambahnya pengalaman, kamu akan semakin nyaman memodifikasi konfigurasi  ini sesuai kebutuhan spesifik proyekmu.

Selamat belajar dan terus eksplorasi! Kalau kamu sudah nyaman dengan tscon tsconfig.json`, coba terapkan di proyek nyata dan rasakan sendiri bagaiman bagaimana TypeScript membuatmu lebih percaya diri dalam menulis kode. Janga Jangan ragu untuk menjelajahi artikel-artikel lain di KamusNgoding untuk me memperdalam pemahamanmu.