Lecture ini mulai masuk ke bagian yang cukup penting dalam TypeScript, yaitu bagaimana TypeScript Compiler (tsc) bekerja dan bagaimana kita mengonfigurasinya.

Di lecture ini ada 2 masalah utama yang ingin diselesaikan:

1. Kita tidak mau menjalankan tsc secara manual setiap kali file berubah.
2. Kita tidak mau compile satu file TypeScript saja ketika project kita sudah memiliki banyak file.

Untuk menyelesaikannya, kita belajar dua hal:

• Watch Mode → tsc --watch / tsc -w
• tsconfig.json → file konfigurasi TypeScript project

Mari kita bahas dari dasar.

1. Ingat dulu: TypeScript harus di-compile

Kita sudah tahu bahwa browser pada dasarnya menjalankan JavaScript, bukan TypeScript secara langsung.

Misalnya kita punya:

// app.ts

let message: string = "Hello TypeScript";

console.log(message);

Browser tidak langsung menggunakan app.ts.

Kita perlu mengubahnya menjadi JavaScript:

app.ts
  ↓
TypeScript Compiler (tsc)
  ↓
app.js
  ↓
Browser

Untuk melakukan compile secara manual, sebelumnya kita menggunakan:

tsc app.ts

Artinya:

“TypeScript compiler, tolong compile file app.ts.”

2. Masalah pertama: harus compile manual terus-menerus

Misalnya kita punya:

let message: string = "Hello John";

console.log(message);

Kemudian kita menjalankan:

tsc app.ts

Maka app.js akan dibuat/update.

Browser kemudian menampilkan:

Hello John

Sekarang kita mengubah:

let message: string = "Hello John";

menjadi:

let message: string = "Hello Jane";

Kita save.

Tapi app.js belum berubah.

Kenapa?

Karena kita belum menjalankan:

tsc app.ts

lagi.

Jadi workflow-nya menjadi:

ubah app.ts
    ↓
save
    ↓
tsc app.ts
    ↓
refresh browser
    ↓
lihat hasil

Kalau kita melakukan perubahan 50 kali, kita harus menjalankan tsc 50 kali.

Tentunya cukup merepotkan.

3. Solusinya: Watch Mode

TypeScript menyediakan fitur bernama Watch Mode.

Watch Mode berarti:

TypeScript akan terus mengawasi file kita. Kalau ada perubahan dan file tersebut di-save, TypeScript akan compile ulang secara otomatis.

Kita bisa menjalankannya dengan:

tsc app.ts --watch

atau versi pendek:

tsc app.ts -w

4. Apa yang terjadi ketika --watch dijalankan?

Misalnya:

tsc app.ts --watch

Setelah command dijalankan, proses tsc tidak langsung berhenti.

Berbeda dengan:

tsc app.ts

yang kira-kira flow-nya:

tsc app.ts
   ↓
compile
   ↓
selesai
   ↓
process berhenti

Sedangkan Watch Mode:

tsc app.ts --watch
       ↓
    compile
       ↓
   terus mengawasi
       ↓
file berubah?
       ↓
     YES
       ↓
compile lagi
       ↓
terus mengawasi
       ↓
file berubah?
       ↓
     YES
       ↓
compile lagi
       ↓
       ...

Jadi prosesnya tetap hidup.

5. Contoh Watch Mode

Misalnya kita punya:

// app.ts

let message = "Hello John";

console.log(message);

Jalankan:

tsc app.ts --watch

TypeScript akan melakukan compile pertama.

Kemudian kita ubah:

let message = "Hello Jane";

Save.

Watch Mode melihat:

“Oh, app.ts berubah.”

Kemudian otomatis menjalankan compiler lagi.

app.ts berubah
    ↓
save
    ↓
watch mode mendeteksi perubahan
    ↓
tsc compile ulang
    ↓
app.js diperbarui

Kita tidak perlu menjalankan:

tsc app.ts

lagi.

6. Watch Mode bekerja selama prosesnya hidup

Ini penting.

Ketika kita menjalankan:

tsc app.ts --watch

Watch Mode berjalan terus.

Kalau kita menekan:

Ctrl + C

proses tersebut dihentikan.

Setelah itu:

Watch Mode ❌ berhenti

Kalau kita mengubah app.ts dan save:

app.ts berubah
    ↓
Watch Mode?
    ↓
❌ tidak aktif
    ↓
tidak ada compile otomatis

Jadi kalau mau menggunakan Watch Mode lagi, jalankan:

tsc app.ts --watch

7. Masalah kedua: project memiliki banyak file

Sekarang masuk ke masalah yang lebih besar.

Awalnya project kita hanya punya:

project/
│
├── index.html
├── style.css
└── app.ts

Karena hanya ada satu file TypeScript, kita bisa melakukan:

tsc app.ts

Tapi project yang lebih besar bisa seperti:

project/
│
├── index.html
├── style.css
│
├── app.ts
├── config.ts
├── user.ts
├── product.ts
├── utility.ts
└── validation.ts

Sekarang ada banyak file .ts.

Kalau kita masih menggunakan cara lama:

tsc app.ts
tsc config.ts
tsc user.ts
tsc product.ts
tsc utility.ts
tsc validation.ts

tentu tidak praktis.

Kita ingin mengatakan kepada TypeScript:

“Tolong kelola project ini dan compile semua file TypeScript yang relevan.”

Nah, di sinilah kita membutuhkan tsconfig.json.

8. Apa itu tsconfig.json?

tsconfig.json adalah:

file konfigurasi untuk TypeScript project.

File ini memberitahu TypeScript bagaimana project kita harus di-compile.

Misalnya nanti kita bisa mengatur:

• file mana yang di-compile
• JavaScript version yang digunakan
• module system
• folder output
• strict checking
• source map
• dan berbagai compiler options lainnya

Lecture ini baru memperkenalkan konsepnya. Detail konfigurasi akan dibahas di lecture berikutnya.

9. Cara membuat tsconfig.json

Kita bisa menjalankan:

tsc --init

Command ini digunakan untuk membuat konfigurasi TypeScript project.

Setelah menjalankannya, TypeScript akan membuat:

tsconfig.json

Misalnya struktur project kita menjadi:

project/
│
├── index.html
├── style.css
├── app.ts
├── config.ts
├── user.ts
└── tsconfig.json

10. Apa fungsi tsconfig.json?

Bayangkan kamu memiliki seorang manager.

Kamu punya banyak file:

app.ts
config.ts
user.ts
product.ts

Kemudian kamu berkata kepada TypeScript:

“Ini adalah project TypeScript saya. Ini aturan-aturan bagaimana project ini harus di-compile.”

Aturan tersebut disimpan di:

tsconfig.json

Jadi secara sederhana:

tsconfig.json
       ↓
aturan untuk TypeScript Compiler
       ↓
       tsc
       ↓
compile project

11. Setelah ada tsconfig.json, kita tidak perlu menyebut file satu per satu

Sebelumnya:

tsc app.ts

Artinya:

Compile app.ts.

Kalau:

tsc config.ts

Artinya:

Compile config.ts.

Tetapi setelah kita punya tsconfig.json, kita bisa menjalankan:

tsc

Tanpa nama file.

Ini sangat penting.

tsc

sekarang berarti kurang lebih:

“Gunakan konfigurasi TypeScript project ini dan compile project sesuai aturan yang ada.”

12. Contoh project dengan banyak file

Misalnya kita punya:

project/
│
├── app.ts
├── config.ts
└── user.ts

app.ts:

console.log("App file");

config.ts:

console.log("Config file");

user.ts:

console.log("User file");

Setelah kita menjalankan:

tsc --init

kemudian menjalankan:

tsc

TypeScript akan melakukan compile sesuai konfigurasi project.

Hasilnya bisa menjadi:

project/
│
├── app.ts
├── app.js
│
├── config.ts
├── config.js
│
├── user.ts
├── user.js
│
└── tsconfig.json

Jadi kita tidak perlu melakukan:

tsc app.ts
tsc config.ts
tsc user.ts

satu per satu.

13. Kenapa tsconfig.json sangat penting untuk project besar?

Bayangkan project yang memiliki:

10 file

Masih lumayan.

Kemudian:

50 file

Mulai merepotkan.

Kemudian:

500 file

Kita jelas tidak ingin melakukan:

tsc file1.ts
tsc file2.ts
tsc file3.ts
...
tsc file500.ts

Dengan project configuration, kita cukup:

tsc

TypeScript membaca:

tsconfig.json

dan menggunakan konfigurasi tersebut.

14. Watch Mode + tsconfig.json

Nah, ini bagian yang sangat berguna.

Sebelumnya kita belajar:

tsc app.ts --watch

Ini mengawasi app.ts.

Sekarang kita sudah punya tsconfig.json.

Kita bisa menjalankan:

tsc --watch

atau:

tsc -w

Sekarang Watch Mode bekerja berdasarkan konfigurasi project.

Misalnya project memiliki:

app.ts
config.ts
user.ts

Jika kita mengubah:

user.ts

dan save:

user.ts
   ↓
save
   ↓
watch mode mendeteksi perubahan
   ↓
TypeScript compile ulang

Begitu juga kalau kita mengubah:

config.ts

atau:

app.ts

15. Jadi ada dua konsep berbeda

Jangan sampai tertukar.

tsc --watch

Ini berbicara tentang:

kapan compiler dijalankan.

Yaitu:

Jalankan compiler otomatis ketika file berubah.

tsconfig.json

Ini berbicara tentang:

bagaimana project TypeScript dikonfigurasi.

Misalnya:

File mana yang diproses? JavaScript version apa? Output ke folder mana? Apakah strict mode aktif?

Jadi:

tsc --watch
     ↓
WHEN?
kapan compile?
     ↓
setiap ada perubahan

Sedangkan:

tsconfig.json
     ↓
HOW?
bagaimana compile?
     ↓
menggunakan konfigurasi project

16. Analogi sederhana

Bayangkan kamu punya mesin fotokopi.

Tanpa konfigurasi

Kamu datang setiap kali dan berkata:

“Fotokopi dokumen A.”

tsc app.ts

Kemudian:

“Fotokopi dokumen B.”

tsc config.ts

Kemudian:

“Fotokopi dokumen C.”

tsc user.ts

Capek kalau dokumennya banyak.

Dengan tsconfig.json

Kamu memberikan sebuah instruksi:

“Ini aturan project saya. Kelola dokumen-dokumen di dalamnya berdasarkan aturan ini.”

Instruksinya disimpan:

tsconfig.json

Kemudian kamu cukup mengatakan:

tsc

Dengan Watch Mode

Sekarang kamu mengatakan:

“Kalau ada dokumen berubah, langsung proses lagi.”

Itulah:

tsc --watch

Jadi kombinasi keduanya:

tsconfig.json
      ↓
menentukan konfigurasi project
      ↓
tsc --watch
      ↓
mengawasi perubahan
      ↓
compile otomatis

17. tsc --init vs tsc

Ini juga perlu diingat.

tsc --init

tsc --init

Gunanya:

Membuat file tsconfig.json.

Jadi ini lebih seperti setup awal project.

tsc

tsc

Gunanya:

Menjalankan TypeScript compiler berdasarkan konfigurasi project.

tsc --watch

tsc --watch

Gunanya:

Menjalankan compiler dalam Watch Mode berdasarkan konfigurasi project.

18. Ringkasan command

19. Workflow yang sebelumnya kita lakukan

Sebelum menggunakan konfigurasi:

Tulis TypeScript
       ↓
Save
       ↓
tsc app.ts
       ↓
JavaScript dibuat
       ↓
Browser

Setiap ada perubahan:

Edit
 ↓
Save
 ↓
tsc app.ts
 ↓
Browser

Manual terus.

20. Workflow setelah menggunakan Watch Mode

Sekarang:

tsc app.ts --watch
        ↓
   Watch Mode aktif
        ↓
    Edit app.ts
        ↓
       Save
        ↓
Compiler otomatis
        ↓
    app.js update

Tidak perlu menjalankan tsc lagi setiap kali save.

21. Workflow project besar

Dengan banyak file:

app.ts
config.ts
user.ts
product.ts
utility.ts

Kita membuat:

tsc --init

yang menghasilkan:

tsconfig.json

Kemudian:

tsc

TypeScript menggunakan konfigurasi project.

Dan kalau ingin otomatis:

tsc --watch

Sekarang workflow kita menjadi:

                 tsconfig.json
                      ↓
                 TypeScript
                   project
                      ↓
                 tsc --watch
                      ↓
              ┌───────┴───────┐
              ↓       ↓       ↓
            app.ts config.ts user.ts
              ↓       ↓       ↓
              └───────┬───────┘
                      ↓
                 compile otomatis
                      ↓
                JavaScript files

22. Satu hal yang perlu diluruskan

Di lecture disebut bahwa setelah tsc --init, TypeScript akan compile semua file TypeScript di project.

Untuk pemahaman awal, anggap seperti itu.

Tapi secara teknis, tsconfig.json bisa menentukan file mana yang termasuk/exclude dalam project menggunakan konfigurasi seperti include, exclude, dan files.

Jadi bukan berarti:

“Setiap file .ts di seluruh komputer akan otomatis di-compile.”

Yang dimaksud adalah file-file yang termasuk dalam TypeScript project berdasarkan konfigurasi tersebut.

Detail ini akan lebih jelas ketika membahas isi tsconfig.json.

23. Konsep paling penting dari lecture ini

Ada tiga hal yang harus benar-benar kamu ingat.

① Watch Mode

tsc --watch

Artinya:

“Awasi perubahan file dan compile otomatis ketika file disimpan.”

② tsconfig.json

tsconfig.json

Artinya:

“Ini adalah konfigurasi untuk TypeScript project saya.”

③ tsc --init

tsc --init

Artinya:

“Buat konfigurasi TypeScript project (tsconfig.json).”

24. Hubungkan dengan materi sebelumnya

Sebelumnya kita banyak belajar tentang bahasa TypeScript-nya:

Type
 ├── string
 ├── number
 ├── boolean
 ├── union
 ├── literal
 ├── unknown
 ├── never
 └── ...

Sekarang kita mulai belajar tentang alat yang menjalankan TypeScript:

TypeScript Code
      ↓
 TypeScript Compiler
      ↓
 JavaScript

Dan kita mulai mengatur compiler tersebut:

             TypeScript Compiler
                     ↑
                     │
              tsconfig.json
                     │
        ┌────────────┴────────────┐
        │                         │
    compiler rules            project files

Ini merupakan transisi penting dari:

“Bagaimana cara menulis TypeScript?”

menjadi:

“Bagaimana cara mengelola dan menjalankan TypeScript dalam sebuah project?”

🧠 Cheat sheet

Kalau besok kamu lupa semuanya, cukup ingat ini:

tsc app.ts
→ compile satu file

tsc app.ts --watch
→ compile satu file + otomatis compile saat berubah

tsc --init
→ buat tsconfig.json

tsc
→ compile project berdasarkan tsconfig.json

tsc --watch
→ compile project + otomatis compile saat ada perubahan

Dan kalimat paling penting:

--watch mengatur agar compiler bekerja otomatis ketika ada perubahan, sedangkan tsconfig.json menjadi pusat konfigurasi TypeScript project.

I can also create an image explaining the flow .ts → tsc → .js → browser dan hubungan tsconfig.json dengan Watch Mode.