Lecture ini melanjutkan pembahasan tsconfig.json. Kalau lecture sebelumnya kita baru mengenal bahwa tsconfig.json adalah file konfigurasi TypeScript project, sekarang kita mulai melihat bagaimana menentukan file mana yang boleh dan tidak boleh di-compile.

Ada 3 properti utama yang dibahas:

• exclude
• include
• files

Kunci untuk memahami lecture ini sebenarnya sederhana:

include = file mana yang ingin kita compile exclude = file mana yang tidak ingin kita compile files = file tertentu yang ingin kita compile secara eksplisit

Mari kita bahas satu per satu.

1. Ingat kembali tsconfig.json

Sebelumnya kita menjalankan:

tsc --init

dan TypeScript membuat:

tsconfig.json

File ini menjadi semacam pusat pengaturan TypeScript project.

Misalnya:

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

Ketika kita menjalankan:

tsc

TypeScript akan melihat:

tsconfig.json

lalu menentukan bagaimana project tersebut harus di-compile.

Salah satu hal yang perlu ditentukan adalah:

“File mana saja yang harus di-compile?”

Nah, untuk itu kita punya include, exclude, dan files.

2. exclude — menentukan file yang TIDAK ingin di-compile

Misalnya project kita punya:

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

Secara default, TypeScript bisa menemukan file-file TypeScript yang termasuk dalam project.

Tapi misalnya kita mengatakan:

“Saya ingin compile app.ts dan config.ts, tapi jangan compile test.ts.”

Kita bisa menggunakan:

{
    "compilerOptions": {},
    "exclude": [
        "test.ts"
    ]
}

Artinya:

Jangan masukkan test.ts ke dalam proses compilation.

3. Apa yang terjadi tanpa exclude?

Misalnya:

app.ts
config.ts
test.ts

Kemudian:

tsc

Hasilnya bisa menjadi:

app.ts    → app.js
config.ts → config.js
test.ts   → test.js

Karena semuanya termasuk dalam project.

4. Setelah menggunakan exclude

Kita tulis:

{
    "exclude": [
        "test.ts"
    ]
}

Kemudian:

tsc

Hasilnya:

app.ts    → app.js
config.ts → config.js
test.ts   → ❌ tidak di-compile

Jadi:

exclude
   ↓
"Jangan compile file ini"

5. Kenapa kita membutuhkan exclude?

Dalam project nyata, kita bisa memiliki berbagai macam file.

Misalnya:

src/
├── app.ts
├── user.ts
├── product.ts
└── test.ts

Kita mungkin ingin:

app.ts
user.ts
product.ts

masuk production.

Tetapi:

test.ts

hanya digunakan untuk testing.

Jadi kita bisa mengecualikannya.

Contoh:

{
    "exclude": [
        "src/test.ts"
    ]
}

6. exclude menggunakan relative path

Misalnya struktur project:

project/
│
├── app.ts
│
└── src/
    ├── user.ts
    └── test.ts

Kalau ingin mengecualikan test.ts, kita bisa menulis:

{
    "exclude": [
        "src/test.ts"
    ]
}

Perhatikan bahwa path-nya relatif terhadap project/configuration file.

7. exclude bisa menggunakan wildcard

Sekarang misalnya project kita memiliki:

app.ts
user.ts
test.dev.ts
config.dev.ts
product.ts

Kita ingin mengatakan:

“Semua file yang namanya berakhir dengan .dev.ts jangan di-compile.”

Kita bisa menggunakan wildcard:

{
    "exclude": [
        "*.dev.ts"
    ]
}

Tanda:

*

disebut wildcard.

Secara sederhana, * berarti:

“Apa pun.”

Jadi:

*.dev.ts

bisa cocok dengan:

test.dev.ts
config.dev.ts
user.dev.ts

8. Wildcard dengan folder

Misalnya kita memiliki:

src/
├── app.ts
├── test.dev.ts
└── config.ts

utils/
├── helper.ts
└── test.dev.ts

Kita bisa menggunakan pola seperti:

{
    "exclude": [
        "**/*.dev.ts"
    ]
}

Artinya kurang lebih:

Cari file .dev.ts di folder-folder project dan jangan compile.

Untuk tahap ini, yang penting kamu memahami konsep wildcard:

*   → wildcard

yang digunakan untuk mencocokkan banyak nama file.

9. node_modules dan exclude

Lecture juga membahas folder:

node_modules

Kalau kamu pernah menggunakan Node.js, React, Angular, atau project JavaScript/TypeScript lainnya, kamu akan sering melihat folder ini.

Misalnya:

project/
│
├── node_modules/
├── src/
├── package.json
└── tsconfig.json

10. Apa itu node_modules?

Secara sederhana:

node_modules menyimpan package/dependency yang digunakan oleh project.

Misalnya project kita membutuhkan library tertentu.

Library tersebut dan dependency-nya bisa berada di:

node_modules/

Isinya bisa sangat banyak.

Contohnya secara konsep:

node_modules/
├── package-a/
├── package-b/
├── package-c/
├── package-d/
└── ...

Kita biasanya tidak ingin TypeScript menganggap source code dependency tersebut sebagai source code utama project kita untuk di-compile.

11. Mengapa node_modules biasanya tidak perlu kita compile?

Bayangkan project kita hanya memiliki:

src/
├── app.ts
├── user.ts
└── product.ts

Tapi node_modules mungkin memiliki ribuan file dari berbagai dependency.

Kita tidak ingin:

project kita
     +
semua source dependency
     ↓
compile semuanya

Kita hanya ingin:

source code project
     ↓
TypeScript Compiler
     ↓
JavaScript

12. Catatan penting tentang node_modules

Ada detail penting dari lecture:

Secara default, node_modules memang dikecualikan dalam perilaku TypeScript project tertentu.

Jadi kita biasanya tidak perlu menulis:

{
    "exclude": [
        "node_modules"
    ]
}

jika kita tidak menggunakan konfigurasi exclude sendiri.

Tetapi ketika kita menambahkan exclude secara eksplisit, lecture mengingatkan bahwa kita perlu berhati-hati terhadap perilaku default tersebut dan dapat mencantumkan node_modules secara eksplisit jika memang ingin memastikan folder itu dikecualikan.

Contohnya:

{
    "exclude": [
        "node_modules",
        "test.ts"
    ]
}

Jadi untuk pembelajaran lecture ini, ingat:

Kalau kita membuat aturan exclude, kita bisa secara eksplisit memasukkan node_modules jika ingin memastikan folder tersebut dikecualikan.

13. Sekarang kebalikannya: include

Kalau:

exclude = jangan compile

maka:

include = compile

include digunakan untuk menentukan file/folder mana yang ingin dimasukkan ke project compilation.

Misalnya:

app.ts
config.ts
user.ts

Kita hanya ingin:

app.ts
config.ts

Maka:

{
    "include": [
        "app.ts",
        "config.ts"
    ]
}

Artinya:

Hanya file yang termasuk dalam aturan include yang diproses.

14. Contoh include

Misalnya:

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

Kita menulis:

{
    "include": [
        "app.ts",
        "config.ts"
    ]
}

Kemudian:

tsc

Maka:

app.ts    → ✅ compile
config.ts → ✅ compile
user.ts   → ❌ tidak
test.ts   → ❌ tidak

15. include bisa menggunakan folder

Ini salah satu kelebihan include.

Misalnya project kita:

project/
│
├── src/
│   ├── app.ts
│   ├── user.ts
│   ├── product.ts
│   └── config.ts
│
└── test/
    └── test.ts

Kita ingin compile semua TypeScript di dalam src.

Kita bisa menulis:

{
    "include": [
        "src"
    ]
}

Tidak perlu menulis:

{
    "include": [
        "src/app.ts",
        "src/user.ts",
        "src/product.ts",
        "src/config.ts"
    ]
}

Ini sangat berguna untuk project besar.

16. Kenapa include cocok untuk project besar?

Bayangkan ada:

src/
├── app.ts
├── user.ts
├── product.ts
├── config.ts
├── helper.ts
├── service.ts
├── validation.ts
└── ...

Bisa saja ada 100 file.

Kita tidak mau menulis semuanya:

{
    "include": [
        "src/app.ts",
        "src/user.ts",
        "src/product.ts",
        "...",
        "src/file100.ts"
    ]
}

Cukup:

{
    "include": [
        "src"
    ]
}

Artinya:

“Compile file-file yang termasuk di dalam src.”

17. include + exclude

Nah, sekarang kita bisa menggabungkan keduanya.

Misalnya:

src/
├── app.ts
├── user.ts
├── product.ts
└── test.ts

Kita ingin:

Compile semua file di src, kecuali test.ts.

Maka:

{
    "include": [
        "src"
    ],
    "exclude": [
        "src/test.ts"
    ]
}

Flow-nya:

                 src/
                  │
        ┌─────────┼─────────┐
        ↓         ↓         ↓
      app.ts   user.ts   test.ts
        ↓         ↓         ↓
       ✅         ✅        ❌
     compile    compile   exclude

Ini pola yang sangat berguna.

18. Sekarang files

Selain include dan exclude, kita punya:

{
    "files": [
        "app.ts",
        "config.ts"
    ]
}

files digunakan untuk menentukan file tertentu secara eksplisit yang ingin dimasukkan ke compilation.

19. Perbedaan files dan include

Ini bagian yang penting.

files

Kamu menentukan:

“Compile file-file ini.”

Contoh:

{
    "files": [
        "app.ts",
        "config.ts"
    ]
}

Hanya file yang ditulis di sana.

include

Kamu bisa menentukan:

“Compile file-file yang sesuai dengan pola/folder ini.”

Contoh:

{
    "include": [
        "src"
    ]
}

Semua file yang sesuai di dalam src dapat dimasukkan.

20. Perbedaan paling sederhana

Bayangkan kamu punya rak buku.

files

Kamu berkata:

“Saya mau buku A, B, dan C.”

files
 ↓
A
B
C

Harus menyebutkan satu per satu.

include

Kamu berkata:

“Saya mau semua buku dari rak Programming.”

include
 ↓
Programming/
 ↓
semua file yang sesuai

Tidak perlu menyebutkan satu per satu.

21. Kenapa files lebih cocok untuk project kecil?

Misalnya hanya ada:

app.ts
config.ts

Kita bisa:

{
    "files": [
        "app.ts",
        "config.ts"
    ]
}

Simple.

Tapi kalau ada:

src/
├── app.ts
├── user.ts
├── product.ts
├── config.ts
├── service.ts
├── helper.ts
...

lebih praktis:

{
    "include": [
        "src"
    ]
}

Daripada menulis semua file satu per satu.

22. files tidak bisa digunakan untuk folder seperti include

Ini salah satu perbedaan penting dari lecture.

Misalnya:

{
    "files": [
        "src"
    ]
}

Ini bukan cara yang tepat untuk mengatakan:

“Compile semua file di src.”

Karena files ditujukan untuk path file tertentu, bukan directory selection seperti include.

Untuk folder, gunakan:

{
    "include": [
        "src"
    ]
}

23. Perbandingan ketiganya

Sekarang kita gabungkan:

Cara mengingat:

include → "MASUKKAN INI"
exclude → "JANGAN MASUKKAN INI"
files   → "INI SAJA, FILE INI SECARA SPESIFIK"

24. Contoh lengkap

Misalnya project:

project/
│
├── src/
│   ├── app.ts
│   ├── user.ts
│   ├── product.ts
│   └── test.ts
│
├── config.ts
└── tsconfig.json

Kita ingin:

• compile semua yang ada di src
• tetapi jangan compile src/test.ts

Kita bisa:

{
    "include": [
        "src"
    ],
    "exclude": [
        "src/test.ts"
    ]
}

Hasil:

src/app.ts      → ✅
src/user.ts     → ✅
src/product.ts  → ✅
src/test.ts     → ❌
config.ts       → ❌

25. exclude bukan berarti file tersebut “tidak boleh ada”

Ini juga perlu dipahami.

Kalau kita menulis:

{
    "exclude": [
        "src/test.ts"
    ]
}

bukan berarti:

test.ts dihapus.

Bukan juga:

test.ts tidak boleh digunakan.

Maksudnya hanya:

test.ts tidak dimasukkan dalam file yang diproses oleh TypeScript project berdasarkan konfigurasi tersebut.

File-nya tetap ada:

src/
├── app.ts
├── user.ts
└── test.ts   ← masih ada

Hanya saja compiler tidak memasukkannya sesuai aturan project.

26. Jangan salah memahami include

include juga bukan berarti:

“Buat file baru.”

Misalnya:

{
    "include": [
        "src"
    ]
}

Tidak membuat folder src.

Tidak membuat file apa pun.

Itu hanya memberitahu compiler:

“File yang sesuai dengan pattern ini adalah bagian dari project yang perlu diproses.”

27. Bagaimana dengan Watch Mode?

Ini nyambung langsung dengan lecture sebelumnya.

Kita sebelumnya belajar:

tsc --watch

Kalau sekarang kita memiliki:

{
    "include": [
        "src"
    ],
    "exclude": [
        "src/test.ts"
    ]
}

dan menjalankan:

tsc --watch

maka TypeScript akan mengawasi project berdasarkan konfigurasi tersebut.

Secara konsep:

tsconfig.json
      ↓
 include / exclude
      ↓
 menentukan file project
      ↓
  tsc --watch
      ↓
 monitor perubahan
      ↓
 compile otomatis

28. Gambaran besar tsconfig.json

Untuk sekarang, bayangkan tsconfig.json mempunyai dua kelompok pengaturan:

tsconfig.json
│
├── compilerOptions
│      ↓
│   bagaimana compiler bekerja
│
├── include
│      ↓
│   file mana yang masuk
│
├── exclude
│      ↓
│   file mana yang dikeluarkan
│
└── files
       ↓
    file tertentu yang dimasukkan

Ini penting karena nanti tsconfig.json akan semakin banyak isinya.

29. Bedakan compilerOptions dengan include/exclude/files

Lecture juga menyinggung hal ini.

compilerOptions

Mengatur perilaku compiler.

Contohnya nanti:

{
    "compilerOptions": {
        "target": "...",
        "module": "...",
        "strict": true
    }
}

Pertanyaannya:

“Bagaimana TypeScript harus melakukan compilation?”

include, exclude, files

Mengatur file apa yang menjadi bagian dari compilation.

Pertanyaannya:

“File mana yang harus diproses?”

Jadi:

compilerOptions
→ HOW?
→ Bagaimana compile?

include/exclude/files
→ WHAT?
→ File apa yang di-compile?

Ini cara yang bagus untuk mengingatnya.

30. Contoh mental model

Bayangkan kamu punya guru yang memeriksa tugas.

include

Kamu berkata:

“Pak, periksa semua tugas di folder src.”

include → src/

exclude

Kemudian:

“Tapi jangan periksa test.ts.”

exclude → src/test.ts

files

Atau kamu bisa berkata:

“Pak, periksa hanya tugas app.ts dan config.ts.”

files → app.ts, config.ts

compilerOptions

Kemudian kamu memberikan instruksi:

“Dan gunakan aturan penilaian tertentu.”

compilerOptions

31. Mana yang biasanya digunakan?

Untuk project sederhana:

files

bisa cukup.

Untuk project yang lebih besar:

include

biasanya jauh lebih nyaman karena kita bisa menggunakan folder/pattern.

Dan:

exclude

berguna ketika ada bagian tertentu yang tidak ingin kita masukkan.

Pola yang sering kamu temui secara konsep adalah:

{
    "include": [
        "src"
    ],
    "exclude": [
        "src/test.ts"
    ]
}

Artinya:

“Ambil source code dari src, tapi jangan ikutkan test.ts.”

32. Ringkasan visual

                 tsconfig.json
                       │
        ┌──────────────┼──────────────┐
        ↓              ↓              ↓
     include         exclude         files
        │              │              │
        ↓              ↓              ↓
   "MASUKKAN"     "JANGAN MASUKKAN"  "FILE INI"
        │              │              │
        ↓              ↓              ↓
      folder          file/pattern    file tertentu

🧠 Cheat Sheet

Kalau kamu ingin mengingat lecture ini dengan cepat:

include

{
    "include": ["src"]
}

Artinya:

Compile file yang sesuai di dalam src.

exclude

{
    "exclude": ["src/test.ts"]
}

Artinya:

Jangan compile src/test.ts.

Bisa juga menggunakan wildcard:

{
    "exclude": ["*.dev.ts"]
}

files

{
    "files": [
        "app.ts",
        "config.ts"
    ]
}

Artinya:

Masukkan file-file tersebut secara eksplisit.

🎯 Cara paling mudah mengingat

Bayangkan ada pintu masuk ke TypeScript Compiler:

                 TypeScript Compiler
                         ↑
                         │
                    ┌────┴────┐
                    │         │
                 INCLUDE    EXCLUDE
                    │         │
                 "MASUK"   "JANGAN MASUK"

Sedangkan files seperti kamu menunjuk langsung:

files
 ↓
"Compile file A"
"Compile file B"
"Compile file C"

Jadi inti lecture ini adalah:

include menentukan apa yang ingin kita masukkan ke compilation, exclude menentukan apa yang ingin kita keluarkan, dan files memungkinkan kita menentukan file-file tertentu secara eksplisit.

Dan satu koneksi penting dengan lecture sebelumnya:

tsconfig.json
      ↓
menentukan file + aturan compiler
      ↓
tsc
atau
tsc --watch
      ↓
JavaScript

Jadi mulai dari sini, tsconfig.json akan menjadi pusat pengaturan project TypeScript kita, bukan lagi sekadar menjalankan tsc dengan nama file secara manual.