Siapin "Penerjemah" TypeScript: Instalasi Compiler & Setup Dasar!

Udah semangat mau nyobain "kekuatan tipe" dari TypeScript? Mantap! Sebelum kita bisa mulai nulis kode TypeScript (.ts) dan liat keajaibannya, kita perlu satu alat penting: TypeScript Compiler (tsc).

Ingat kan, browser itu gak ngerti kode TypeScript? Nah, tsc inilah yang bertugas "nerjemahin" atau mengkompilasi kode TypeScript (.ts) yang kita tulis jadi kode JavaScript (.js) biasa yang bisa dimengerti sama browser atau Node.js.

Selain compiler, kita juga bakal kenalan sama file konfigurasi penting namanya tsconfig.json yang ngatur gimana cara tsc bekerja buat proyek kita.

Prasyarat: Node.js dan npm (atau yarn) Udah Ada Kan?

Buat nginstal TypeScript Compiler, kita bakal pake npm (Node Package Manager), yang biasanya udah otomatis keinstal bareng Node.js.

• Belum punya Node.js & npm? Coba intip lagi panduan Prasyarat & Ekosistem React bagian instalasi Node.js. Di situ ada cara instal Node.js (yang otomatis dapet npm).
• Udah punya? Mantap! Kamu bisa cek versi Node.js dan npm di terminalmu:

  node -v
  npm -v

  Kalau keluar nomor versinya, berarti udah siap!

Langkah 1: Instalasi TypeScript Compiler (tsc)

Ada dua cara umum buat nginstal typescript (yang isinya compiler tsc): secara global di komputermu, atau secara lokal per proyek.

• Instalasi Global (Direkomendasikan buat Awal Biar Gampang): Dengan instalasi global, kamu bisa manggil perintah tsc dari direktori mana aja di terminalmu. Buka terminalmu (Command Prompt, PowerShell, Git Bash, Terminal macOS/Linux) dan ketik:

  npm install -g typescript

  • npm install: Perintah buat nginstal package dari npm.
  • -g: Flag yang artinya "global" (instal di seluruh sistem, bukan cuma buat satu proyek).
  • typescript: Nama package yang mau diinstal.
  • Kamu mungkin butuh hak akses administrator (misal, pake sudo di Linux/macOS: sudo npm install -g typescript) kalau instal global.

• Instalasi Lokal per Proyek (Praktik Baik buat Proyek Beneran): Kalau kamu kerja di proyek yang lebih serius atau bareng tim, lebih baik nginstal typescript sebagai dev dependency (ketergantungan pas development) di proyek itu aja. Ini biar tiap proyek bisa punya versi TypeScript-nya sendiri.

  1. Masuk dulu ke folder proyekmu via terminal: cd path/ke/proyekmu
  2. Jalanin:

     npm install --save-dev typescript
     # atau yarn add --dev typescript

  Kalau instal lokal, buat ngejalanin tsc, kamu biasanya pake npx tsc (npx itu alat dari npm buat ngejalanin package lokal) atau ngedefinisiin skrip di package.json. Tapi buat belajar awal, instal global lebih gampang.

Verifikasi Instalasi TypeScript: Setelah instalasi selesai (baik global maupun lokal), coba ketik di terminal:

tsc -v 
# atau tsc --version

Kalau berhasil, dia bakal nampilin versi TypeScript yang keinstal, misalnya:

Version 5.3.3 

(Angka versinya bisa beda ya). Kalau ada pesan "command not found" (dan kamu instal global), coba tutup terus buka lagi terminalmu, atau pastiin PATH environment-mu udah bener.

Langkah 2: Membuat File Konfigurasi TypeScript (tsconfig.json)

Setiap proyek TypeScript biasanya punya file konfigurasi namanya tsconfig.json. File ini ngasih tau compiler tsc gimana cara dia harus ngompilasi file-file .ts di proyekmu jadi .js.

• Cara Gampang Bikin tsconfig.json Dasar:

  1. Pastikan kamu ada di direktori root (paling atas) proyek TypeScript-mu di terminal.
  2. Ketik perintah:

     tsc --init

  3. Perintah ini bakal otomatis nge-generate file tsconfig.json dengan banyak banget opsi konfigurasi default (sebagian besar dikomentarin pake //).

• Isi tsconfig.json yang Penting buat Pemula (Contoh): Kamu bisa buka file tsconfig.json yang baru dibuat pake Code Editor (misalnya VS Code). Awalnya mungkin keliatan banyak banget, tapi ini beberapa opsi kunci yang sering diatur buat mulai:

  // Contoh isi tsconfig.json yang disederhanakan
  {
    "compilerOptions": {
      /* Visit https://aka.ms/tsconfig to read more about this file */
   
      /* Language and Environment */
      "target": "es2016", // Versi JavaScript output (ES2016, ES2020, ESNext, dll.)
      "lib": ["dom", "dom.iterable", "esnext"], // Library bawaan JS yang dikenali (misal, DOM API)
      "jsx": "react-jsx", // Kalau pake React JSX (penting buat nanti)
   
      /* Modules */
      "module": "esnext", // Sistem modul yang dipake (ESNext, commonjs)
      "moduleResolution": "bundler", // Atau "node", cara TS nyari modul
      // "rootDir": "./src", // (Opsional) Folder utama kode TS-mu
   
      /* JavaScript Support */
      // "allowJs": true, // (Opsional) Bolehin file .js diimpor ke .ts
      // "checkJs": true, // (Opsional) TypeScript juga ngecek file .js
   
      /* Emit */
      // "outDir": "./dist", // (Opsional) Folder tempat nyimpen hasil .js kompilasi
      // "sourceMap": true, // (Opsional tapi berguna) Bikin source map buat debugging
   
      /* Interop Constraints */
      "esModuleInterop": true, // Penting buat kompatibilitas modul CommonJS dan ES Modules
      "forceConsistentCasingInFileNames": true, // Biar nama file konsisten case-nya
   
      /* Type Checking */
      "strict": true, // WAJIB BANGET DIAKTIFIN! Ngaktifin semua pengecekan tipe yang ketat.
      // "noImplicitAny": true, // (Bagian dari strict) Gak bolehin tipe 'any' implisit.
      // "strictNullChecks": true, // (Bagian dari strict) Lebih ketat soal null & undefined.
   
      /* Completeness */
      "skipLibCheck": true // (Opsional) Gak ngecek tipe di file deklarasi library (.d.ts), bisa percepat kompilasi
    },
    "include": ["src"] // (Opsional tapi bagus) Folder mana aja yang mau dikompilasi
    // "exclude": ["node_modules", "dist"] // (Opsional) Folder mana aja yang mau diabaikan
  }

  • target: Nentuin versi JavaScript apa yang mau jadi output kompilasi. es2016 atau es2020 itu pilihan yang lumayan aman buat kompatibilitas browser modern. ESNext buat fitur paling baru.
  • module: Nentuin sistem modul yang dipake (commonjs buat Node.js, esnext atau es2015 buat browser yang ngedukung ES Modules).
  • outDir: (Sangat berguna!) Nentuin folder tempat nyimpen file .js hasil kompilasi. Jadi, file .ts dan .js-mu gak nyampur di satu tempat.
  • rootDir: (Berguna!) Nentuin folder utama tempat semua file .ts-mu berada.
  • strict: true: SANGAT PENTING! Ini kayak ngaktifin "mode super ketat" TypeScript. Dia bakal ngaktifin banyak pengecekan tipe yang bagus buat nangkep error lebih awal. Biasain pake ini dari awal!
  • esModuleInterop: true: Ngebantu kompatibilitas pas impor modul yang beda format.
  • include: Nentuin file atau folder mana aja yang mau dikompilasi sama tsc. Kalau gak ada, dia bakal nyari semua file .ts di proyek.

  Kamu gak perlu ngapalin semua opsi ini sekarang. Cukup tau kalau tsconfig.json itu ada dan penting. Seiring kamu belajar, kamu bakal makin ngerti opsi mana aja yang relevan.

Langkah 3: Nulis Kode TypeScript Pertamamu (.ts)

1. Di dalem folder proyekmu (misalnya, di dalem subfolder src kalau kamu pake rootDir), bikin file baru dengan akhiran .ts. Contoh, salam.ts.

2. Tulis kode TypeScript-mu di situ. Buat awal, coba yang simpel dulu:

   File src/salam.ts:

   function sapaDunia(pesan: string): void {
       console.log("Pesan dari TypeScript: " + pesan.toUpperCase());
   }
    
   let namaSaya: string = "Budi TypeScript";
   sapaDunia(namaSaya);
    
   // Coba bikin error tipe sengaja buat liat compiler kerja:
   // sapaDunia(123); // Ini bakal dikasih tau error sama tsc (dan VS Code)

Langkah 4: Mengkompilasi Kode TypeScript ke JavaScript (tsc)

Sekarang, kita "terjemahin" file .ts kita jadi .js pake compiler tsc.

1. Buka terminal di direktori root proyekmu (tempat tsconfig.json berada).

2. Jalanin perintah:

   tsc

   Kalau kamu cuma mau ngompilasi satu file spesifik (dan belum ada tsconfig.json atau mau override):

   tsc src/salam.ts

3. Apa yang Terjadi?

   • tsc bakal ngebaca tsconfig.json (kalau ada) buat tau cara ngompilasi.
   • Dia bakal ngubah file .ts-mu jadi file .js dengan nama yang sama, disimpen di folder yang sama (atau di folder outDir kalau kamu set di tsconfig.json).
   • Kalau ada error tipe di kodemu, tsc bakal nampilin pesan error di terminal dan gak bakal nge-generate file .js (kecuali kamu set opsi "noEmitOnError": false di tsconfig.json, tapi itu gak disarankan).

   Misalnya, kalau kamu uncomment baris sapaDunia(123); di salam.ts tadi, tsc bakal ngasih error kayak:

   src/salam.ts:9:13 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
    
   9 sapaDunia(123);
                 ~~~

   Keren kan? Errornya ketauan sebelum dijalanin!

   Kalau gak ada error, file src/salam.js (atau dist/salam.js kalau pake outDir) bakal kebuat. Isinya kode JavaScript biasa:

   // Isi salam.js (hasil kompilasi)
   function sapaDunia(pesan) {
       console.log("Pesan dari TypeScript: " + pesan.toUpperCase());
   }
   var namaSaya = "Budi TypeScript"; // Jadi var kalau target ES lama, atau let/const kalau target ES6+
   sapaDunia(namaSaya);

Langkah 5: Menjalankan File JavaScript Hasil Kompilasi

File .js hasil kompilasi inilah yang bisa kamu jalanin:

• Di Browser: Link-in file .js itu ke HTML-mu pake tag <script src="path/ke/salam.js"></script>.
• Di Node.js: Jalanin pake node path/ke/salam.js.

Mode --watch: Kompilasi Otomatis Pas Ada Perubahan!

Bolak-balik tsc tiap kali abis ngedit itu capek. Ada cara biar tsc otomatis ngompilasi ulang pas dia deteksi ada perubahan di file .ts-mu:

tsc --watch
# atau tsc -w

Jalanin ini di terminal di root proyekmu. tsc bakal terus "nongkrongin" file-filemu. Begitu kamu simpen perubahan di file .ts, dia bakal otomatis ngompilasi ulang. Praktis banget buat development! Tekan Ctrl+C buat ngehentiin mode watch.

Setup awal TypeScript ini mungkin keliatan ada beberapa langkah ekstra dibanding JavaScript biasa. Tapi, "kerepotan" di awal ini bakal kebayar banget sama manfaat deteksi error dini dan kode yang lebih terstruktur nantinya, apalagi pas proyekmu makin gede.

Biasain diri sama alur: Tulis kode .ts -> Kompilasi pake tsc (atau tsc --watch) -> Jalanin hasil .js-nya. Dengan bantuan Code Editor kayak VS Code yang punya dukungan TypeScript super bagus, kamu bahkan bisa liat error tipe langsung di editor sebelum ngompilasi!