Belajar TypeScript - Instalasi, Konfigurasi tsconfig.json, dan Tooling Dasar

#Pendahuluan

Di episode 1 kalian tahu kenapa TypeScript. Sekarang saatnya membahas bagaimana project TypeScript diatur. Pusat dari semuanya adalah tsconfig.json — file JSON yang memberi tahu compiler tsc apa yang harus dikompilasi, ke mana outputnya, dan seberapa ketat pemeriksaannya.

Banyak developer pemula melewatkan episode ini dan langsung menulis kode. Akibatnya mereka berjuang melawan error aneh seperti modul yang tidak ketemu, target JavaScript yang ketinggalan zaman, atau file yang terkompilasi di lokasi yang salah.

Episode 2 membedah opsi-opsi penting tsconfig.json satu per satu, mengenalkan perintah dasar tsc, dan menyiapkan tooling yang akan dipakai sepanjang series.

#Menginstall TypeScript per Project

#TypeScript sebagai devDependency

Pada episode 0 kita menginstall TypeScript global. Untuk project sungguhan, install sebagai devDependency agar versi TypeScript terdokumentasi di package.json dan konsisten antar anggota tim:

npm init -y
npm install --save-dev typescript
npx tsc --version

Perintah npx tsc --version memakai versi lokal dari folder node_modules — lebih aman daripada mengandalkan versi global yang bisa berbeda antar mesin.

#Dua Mode Compiler

tsc bekerja dalam dua mode. Script mode mengkompilasi file yang disebutkan langsung di baris perintah. Project mode membaca tsconfig.json untuk menentukan file mana yang dikompilasi — inilah mode yang dipakai di hampir semua project nyata.

#Anatomi tsconfig.json

Buat config dasar dengan perintah npx tsc --init, lalu perhatikan file tsconfig.json yang dihasilkan:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "moduleResolution": "bundler",
    "lib": ["es2022", "dom"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Opsi yang paling penting:

• target menentukan versi JavaScript output, misalnya es2022.
• module menentukan format modul output: esnext, commonjs, atau nodenext.
• strict mengaktifkan seluruh pemeriksaan tipe ketat (episode 22).
• outDir dan rootDir menentukan lokasi output dan struktur sumber.
• lib memilih definisi lingkungan yang tersedia, seperti dom untuk browser.

#Perintah Dasar tsc

#Memeriksa Tanpa Output

tsc punya beberapa perintah yang wajib kalian hafal:

npx tsc --noEmit
npx tsc --watch
npx tsc --project tsconfig.json

Perintah npx tsc --noEmit memeriksa semua file tanpa menghasilkan output — paling cocok untuk validasi di CI. Sementara npx tsc --watch mengkompilasi ulang setiap kali file berubah, sangat membantu saat pengembangan.

#Struktur Folder yang Rapi

Dengan rootDir: "./src" dan outDir: "./dist", struktur folder source dipertahankan di output. File src/index.ts akan menghasilkan dist/index.js. Struktur ini menghindari output yang tersebar dan menyederhanakan deployment.

#Tooling Pendukung

#Menjalankan TypeScript Tanpa Dua Tahap

Untuk development, mengkompilasi lalu menjalankan Node.js dua kali terasa lambat. Tool seperti tsx atau ts-node menjalankan TypeScript langsung:

npm install --save-dev tsx
npx tsx src/index.ts

Tool npx tsx src/index.ts menangani transpilasi dan eksekusi dalam satu proses, plus mendukung watch mode lewat tsx watch. Kita akan memakai pola ini lagi di episode 16 saat membangun backend Node.js.

#Penutup

Episode 2 menyiapkan fondasi konfigurasi: TypeScript lokal sebagai devDependency, tsconfig.json dengan opsi inti, perintah tsc yang penting, dan tooling untuk menjalankan kode tanpa dua tahap. Kalian sekarang bisa mengatur project TypeScript dari nol dengan percaya diri.

Inti yang harus dibawa pulang:

• Install TypeScript sebagai devDependency per project, bukan global.
• npx tsc --init menghasilkan kerangka tsconfig.json.
• target, module, strict, outDir, dan rootDir adalah opsi paling penting.
• Gunakan npx tsc --noEmit untuk validasi tanpa output.
• tsc --watch mempermudah pengembangan berulang.
• tsx menjalankan TypeScript langsung tanpa langkah kompilasi terpisah.

Di episode 3 selanjutnya kita akan membahas tipe primitif dan tipe struktur dasar — string, number, boolean, null, undefined, bigint, symbol, plus any, unknown, dan void. Ini adalah alfabet dari sistem tipe TypeScript yang akan kalian kombinasikan di episode-episode berikutnya.