Lecture ini melanjutkan pembahasan compilerOptions di tsconfig.json, dan kali ini ada beberapa option yang perlu kamu pahami:

1. allowJs
2. checkJs
3. jsx
4. declaration
5. declarationMap
6. sourceMap ← bagian yang paling penting di lecture ini

Yang paling penting untuk dipahami adalah perbedaan antara mengikutsertakan JavaScript dalam compilation dan menghubungkan JavaScript hasil compile kembali ke TypeScript saat debugging.

1. Gambaran besar dulu

Sebelumnya kita sudah belajar:

{
  "compilerOptions": {
    "target": "ES2016",
    "lib": ["ES2016", "DOM"]
  }
}

Sekarang kita akan menambahkan beberapa option lain:

compilerOptions
│
├── target
│     → JavaScript versi apa yang dihasilkan?
│
├── lib
│     → API apa yang dikenal TypeScript?
│
├── allowJs
│     → Apakah file .js boleh ikut compilation?
│
├── checkJs
│     → Apakah JavaScript juga diperiksa?
│
├── jsx
│     → Bagaimana JSX diproses?
│
├── declaration
│     → Apakah .d.ts dibuat?
│
├── declarationMap
│     → Mapping untuk declaration files
│
└── sourceMap
      → Hubungkan JavaScript hasil compile
        dengan source TypeScript untuk debugging

2. allowJs

Kita mulai dari:

"allowJs": true

Secara sederhana, allowJs berarti:

“TypeScript project saya boleh memasukkan file JavaScript (.js) ke dalam proses compilation.”

Biasanya dalam project TypeScript kita punya:

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

Semuanya TypeScript.

Tetapi bagaimana kalau project kita seperti ini?

src/
├── app.ts
├── user.ts
├── old-code.js
└── config.js

Ada campuran:

.ts
+
.js

Nah, allowJs berguna untuk kondisi seperti itu.

3. Tanpa allowJs

Misalnya:

{
  "compilerOptions": {
    "allowJs": false
  }
}

atau option tersebut tidak digunakan.

Secara sederhana, project kita berfokus pada:

.ts

File JavaScript tidak dianggap sebagai source JavaScript yang ingin kita ikutkan ke compilation TypeScript.

4. Dengan allowJs: true

Kita bisa menulis:

{
  "compilerOptions": {
    "allowJs": true
  }
}

Sekarang TypeScript bisa memasukkan file:

.ts
.js

ke dalam project compilation.

Misalnya:

src/
├── app.ts
├── user.ts
└── helper.js

Maka helper.js juga bisa menjadi bagian dari project.

5. Kenapa kita membutuhkan allowJs?

Biasanya ketika melakukan migrasi dari JavaScript ke TypeScript.

Misalnya project lama kita seluruhnya JavaScript:

old-project/
├── app.js
├── user.js
├── product.js
├── config.js
└── helper.js

Kemudian kita ingin pindah perlahan ke TypeScript.

Tidak realistis kalau kita langsung mengubah 100% file sekaligus.

Kita bisa melakukan:

Tahap 1
JavaScript
↓
app.js
user.js
product.js

Tahap 2
Mulai tambahkan TypeScript
↓
app.ts
user.js
product.js

Tahap 3
Migrasi bertahap
↓
app.ts
user.ts
product.ts

Tahap 4
Semuanya TypeScript

allowJs membantu project JavaScript + TypeScript hidup berdampingan.

6. checkJs

Sekarang ada option kedua:

"checkJs": true

checkJs berarti:

“Kalau ada file JavaScript, lakukan type/syntax checking terhadap file JavaScript tersebut.”

Ini berbeda dengan allowJs.

7. Perbedaan allowJs dan checkJs

Ini wajib kamu bedakan.

allowJs

Menjawab:

“Apakah file .js boleh ikut project compilation?”

checkJs

Menjawab:

“Apakah file .js tersebut juga perlu diperiksa oleh TypeScript?”

Jadi:

allowJs
   ↓
Boleh masuk?

checkJs
   ↓
Perlu diperiksa?

8. Analogi allowJs vs checkJs

Bayangkan ada sebuah sekolah.

Ada siswa:

TypeScript students
JavaScript students

allowJs

Seperti mengatakan:

“Siswa JavaScript boleh masuk sekolah.”

checkJs

Seperti mengatakan:

“Dan tugas siswa JavaScript juga akan diperiksa.”

Jadi:

allowJs = boleh masuk
checkJs = diperiksa

9. Contoh

Misalnya:

// helper.js

function add(a, b) {
    return a + b;
}

Dengan:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false
  }
}

JavaScript boleh ikut project, tetapi TypeScript tidak melakukan checking seketat ketika checkJs diaktifkan.

Kalau:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

TypeScript juga akan memeriksa kode JavaScript tersebut dan melaporkan problem yang dapat dideteksinya.

10. Kapan allowJs + checkJs berguna?

Terutama ketika:

Project kita masih JavaScript tetapi sedang bermigrasi ke TypeScript.

Misalnya:

Project lama
     ↓
JavaScript
     ↓
Tambahkan TypeScript
     ↓
allowJs: true
checkJs: true
     ↓
Migrasi secara bertahap

Jadi kita tidak harus melakukan migrasi besar-besaran sekaligus.

11. Kenapa lecture tidak mengaktifkannya?

Project dalam lecture sudah menggunakan TypeScript:

app.ts
config.ts
dll.

Kemudian hasil compilation menghasilkan:

app.js
config.js

Nah, kalau kita mengaktifkan:

"allowJs": true

ada potensi file .js yang sudah merupakan hasil compilation ikut dianggap sebagai source JavaScript.

Contohnya:

app.ts
  ↓
tsc
  ↓
app.js

Kalau app.js kemudian dianggap sebagai input juga, kita bisa mendapatkan situasi:

app.ts
 ↓
app.js

app.js
 ↓
diproses lagi

Padahal kita tidak membutuhkan itu.

12. Jadi hati-hati dengan generated JavaScript

Misalnya project:

project/
├── app.ts
├── config.ts
├── app.js       ← hasil compile
└── config.js    ← hasil compile

Kalau allowJs diaktifkan sembarangan, file .js yang sebenarnya output bisa ikut terbaca sebagai input.

Makanya dalam project TypeScript murni, kita biasanya tidak perlu:

"allowJs": true

13. jsx

Option berikutnya:

"jsx": ...

Ini berhubungan dengan JSX, yang sangat umum digunakan dalam project React.

Contohnya:

const element = <h1>Hello World</h1>;

Perhatikan:

<h1>Hello World</h1>

Itu bukan syntax JavaScript biasa.

Itu adalah JSX.

14. Kenapa TypeScript punya option jsx?

Karena TypeScript perlu tahu:

“Kalau saya menemukan JSX, bagaimana JSX tersebut harus diproses?”

Ada beberapa mode JSX yang bisa dipilih tergantung setup project dan versi React/TypeScript.

Untuk sekarang, yang penting:

jsx option
     ↓
mengatur bagaimana JSX diproses

Kalau project kita bukan React dan tidak menggunakan JSX:

Kita tidak perlu memikirkan option ini.

Seperti yang dikatakan lecture.

15. declaration

Berikutnya:

"declaration": true

Ini sedikit lebih advanced.

Ketika declaration diaktifkan, TypeScript dapat menghasilkan file:

.d.ts

Misalnya:

app.ts
   ↓
TypeScript Compiler
   ↓
app.js
app.d.ts

16. Apa itu .d.ts?

.d.ts adalah declaration file.

File tersebut berisi informasi tentang type, tetapi bukan implementation utama.

Misalnya kita punya:

export function add(a: number, b: number): number {
    return a + b;
}

Declaration file-nya kira-kira akan berisi:

export declare function add(a: number, b: number): number;

Perhatikan:

Implementation
↓
return a + b

tidak ada di declaration file.

Declaration file lebih seperti:

“Library ini mempunyai function bernama add, menerima dua number, dan menghasilkan number.”

17. Kapan declaration berguna?

Biasanya ketika kita membuat library/package untuk digunakan orang lain.

Misalnya kita membuat:

my-awesome-library

Orang lain meng-install:

my-awesome-library

Mereka perlu tahu:

function apa yang tersedia?
parameter-nya apa?
return type-nya apa?
class apa yang tersedia?

File .d.ts membantu TypeScript milik pengguna memahami API library kita.

18. declarationMap

Kemudian ada:

"declarationMap": true

Ini berhubungan dengan .d.ts dan mapping-nya.

Secara sederhana:

.ts
 ↓
.d.ts
 ↓
declaration map

Declaration map membantu tooling mengetahui hubungan antara declaration file dan source TypeScript.

Ini berguna terutama untuk library development dan pengalaman developer seperti navigasi ke source code.

Untuk project TypeScript biasa yang sedang belajar:

Belum perlu terlalu memikirkan declarationMap.

19. Sekarang bagian paling penting: sourceMap

Nah, kita masuk ke option utama lecture:

"sourceMap": true

Ini sangat penting untuk debugging.

20. Masalahnya: browser menjalankan JavaScript, bukan TypeScript

Misalnya kita punya:

app.ts

Browser biasanya tidak menjalankan TypeScript secara langsung.

TypeScript kita compile:

app.ts
  ↓
TypeScript Compiler
  ↓
app.js
  ↓
Browser

Jadi browser menjalankan:

app.js

bukan:

app.ts

21. Masalah ketika debugging

Misalnya app.ts kita:

const pi = 3.14;

console.log("value of pi is", pi);

Setelah compile:

const pi = 3.14;

console.log("value of pi is", pi);

Secara sederhana mungkin kelihatannya sama.

Tetapi pada project yang lebih kompleks, TypeScript bisa ditransformasikan.

Misalnya:

const add = (a: number, b: number): number => {
    return a + b;
};

Output-nya mungkin berubah tergantung target.

Kalau kita debugging browser, browser melihat:

app.js

Bukan:

app.ts

22. Tanpa Source Map

Bayangkan kita memasang breakpoint:

app.js
  line 10

Developer Tools akan menunjukkan JavaScript hasil compilation.

Masalahnya:

Kita sebagai developer sebenarnya lebih nyaman membaca dan debugging app.ts.

Karena source code yang kita tulis adalah:

app.ts

bukan:

app.js

23. sourceMap: true

Sekarang kita aktifkan:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

Kemudian compile.

TypeScript akan menghasilkan:

app.ts
   ↓
   tsc
   ↓
app.js
app.js.map

Ada file baru:

app.js.map

24. Apa itu .js.map?

File:

app.js.map

disebut source map.

Ia berfungsi sebagai semacam peta penghubung antara:

JavaScript hasil compilation

dan:

TypeScript source code

Secara sederhana:

app.ts
   ↕
app.js
   ↑
app.js.map

Source map membantu browser Developer Tools memahami:

“JavaScript di sini berasal dari bagian mana dari source TypeScript?”

25. Analogi source map

Bayangkan kamu menerjemahkan buku:

Bahasa Indonesia
      ↓
Bahasa Inggris

Hasil akhirnya adalah buku bahasa Inggris.

Kalau kita menemukan kalimat bermasalah di buku bahasa Inggris, kita ingin tahu:

“Kalimat ini asalnya dari halaman mana di buku Indonesia?”

Source map seperti peta terjemahan.

Source TypeScript
      ↓
JavaScript output
      ↑
   source map

Source map membantu developer tools melakukan mapping tersebut.

26. Apa keuntungan sourceMap?

Dengan:

"sourceMap": true

Developer Tools browser dapat menampilkan source TypeScript.

Misalnya:

Sources
│
├── app.ts
├── config.ts
├── user.ts
│
├── app.js
├── config.js
└── user.js

Kemudian kita bisa:

• membuka app.ts
• memasang breakpoint di TypeScript
• menjalankan aplikasi
• melakukan debugging dari source TypeScript

Ini jauh lebih nyaman.

27. Sebelum source map

Tanpa source map:

Developer
    ↓
Debug
    ↓
app.js
    ↓
JavaScript hasil compile

Kita harus berurusan dengan generated code.

28. Dengan source map

Dengan:

"sourceMap": true

alur debugging menjadi:

Developer
    ↓
Debug
    ↓
app.ts
    ↓
Source Map
    ↓
app.js
    ↓
Browser

Jadi developer bekerja dengan source asli, sementara browser tetap menjalankan JavaScript hasil compilation.

29. File .map itu sebenarnya apa?

Kalau kamu buka:

app.js.map

isinya memang bisa terlihat sangat aneh.

Misalnya ada informasi seperti:

{
    "version": 3,
    "file": "app.js",
    "sourceRoot": "",
    "sources": ["app.ts"],
    "names": [],
    "mappings": "..."
}

Jangan khawatir.

Kamu tidak perlu membaca isi file .map secara manual.

Yang penting pahami:

File .map menyimpan informasi mapping antara generated JavaScript dan source code asli.

30. Kenapa disebut “map”?

Karena dia melakukan mapping.

Misalnya:

app.js line 10
       ↓
app.ts line 7

Atau secara konsep:

JavaScript output
       │
       │ source map
       ↓
TypeScript source

Jadi Developer Tools bisa mengetahui hubungan keduanya.

31. sourceMap tidak mengubah runtime logic

Ini juga penting.

Ketika kita mengaktifkan:

"sourceMap": true

kita tidak sedang menambahkan fitur JavaScript baru.

Source map terutama membantu development dan debugging.

Browser tetap menjalankan:

app.js

File:

app.js.map

digunakan oleh tooling untuk membantu developer.

32. Kenapa lecture mematikan sourceMap lagi?

Di lecture project-nya kecil.

Kalau:

"sourceMap": true

maka setiap:

app.ts

menghasilkan:

app.js
app.js.map

Jadi akan ada file tambahan:

app.js.map
config.js.map
user.js.map
...

Untuk project kecil yang sedang belajar, mungkin dianggap tidak perlu.

Maka lecture kembali:

// "sourceMap": true

Tetapi dalam project development yang lebih serius, source map sangat berguna untuk debugging.

33. Perbedaan semua option dalam lecture

Sekarang kita buat tabel supaya gampang diingat.

34. allowJs vs sourceMap jangan tertukar

Keduanya sama-sama berhubungan dengan .js, tetapi konteksnya berbeda.

allowJs

.js
 ↓
boleh menjadi INPUT?

sourceMap

.ts
 ↓
compile
 ↓
.js
 ↓
bagaimana debugging kembali ke .ts?

Jadi:

allowJs  → INPUT
sourceMap → DEBUGGING

35. declaration juga jangan tertukar dengan sourceMap

declaration

Menghasilkan:

.d.ts

untuk menyediakan informasi type/API.

sourceMap

Menghasilkan:

.js.map

untuk mapping source code saat debugging.

Jadi:

declaration
    ↓
.d.ts
    ↓
Type information / library API


sourceMap
    ↓
.js.map
    ↓
Debugging / source mapping

36. Gambaran lengkap compilation

Misalnya:

app.ts

Dengan konfigurasi tertentu:

{
  "compilerOptions": {
    "target": "ES2016",
    "sourceMap": true,
    "declaration": true
  }
}

Maka hasilnya bisa berupa:

app.ts
   │
   ↓
TypeScript Compiler
   │
   ├──────────────→ app.js
   │
   ├──────────────→ app.js.map
   │
   └──────────────→ app.d.ts

Masing-masing memiliki tujuan berbeda:

app.js
↓
yang dijalankan browser/runtime

app.js.map
↓
membantu debugging

app.d.ts
↓
memberikan informasi type/API kepada consumer

37. Satu konsep penting: compile vs debug

Kita bisa membagi option-option tadi menjadi beberapa kelompok.

Mengatur source yang boleh masuk

allowJs

Memeriksa source

checkJs

Mengatur output/transformasi tertentu

target
jsx

Menghasilkan informasi type untuk library

declaration
declarationMap

Membantu debugging

sourceMap

Ini membuat compilerOptions jauh lebih mudah dipahami.

38. Contoh nyata

Misalnya kamu membuat website:

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

HTML:

<button id="btn">Click Me</button>

TypeScript:

const button = document.getElementById("btn")!;

button.addEventListener("click", () => {
    console.log("Button clicked");
});

Compile:

app.ts
   ↓
tsc
   ↓
app.js

Browser menjalankan:

app.js

Sekarang ada bug.

Kamu ingin breakpoint pada:

button.addEventListener(...)

Kalau sourceMap aktif:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

browser developer tools dapat membantu kamu debugging langsung dari:

app.ts

Itulah manfaat praktis sourceMap.

39. Mental model yang harus kamu punya

Coba bayangkan TypeScript compiler sebagai sebuah pabrik.

                 SOURCE
                   │
          ┌────────┴────────┐
          │                 │
        app.ts            helper.js
          │                 │
          └────────┬────────┘
                   ↓
            TypeScript Compiler
                   │
        ┌──────────┼──────────┐
        ↓          ↓          ↓
      app.js    app.js.map   app.d.ts
        │          │           │
        ↓          ↓           ↓
     Runtime    Debugging   Type info

Ini adalah gambaran yang sangat bagus untuk mengingat fungsi masing-masing file.

40. Ringkasan paling penting

Kalau besok kamu lupa semua detail lecture ini, ingat 6 kalimat berikut:

allowJs

“Bolehkan file JavaScript ikut dalam project TypeScript?”

"allowJs": true

checkJs

“Kalau file JavaScript ikut, apakah TypeScript harus memeriksanya?”

"checkJs": true

jsx

“Bagaimana JSX diproses?”

Biasanya relevan untuk React/JSX.

declaration

“Buatkan file .d.ts yang menjelaskan API/type library saya.”

"declaration": true

declarationMap

“Buat mapping untuk declaration files.”

Lebih advanced dan biasanya berguna saat membuat library.

sourceMap

“Hubungkan JavaScript hasil compile dengan source asli supaya saya bisa debugging source TypeScript.”

"sourceMap": true

🧠 Cheat Sheet Super Singkat

allowJs
   ↓
.js boleh ikut?

checkJs
   ↓
.js diperiksa?

jsx
   ↓
JSX diproses bagaimana?

declaration
   ↓
buat .d.ts

declarationMap
   ↓
mapping .d.ts

sourceMap
   ↓
debug .ts walaupun browser menjalankan .js

Dan khusus sourceMap, hafalkan alur ini:

                 app.ts
                   │
                   │ tsc
                   ↓
                 app.js
                   │
                   ↓
                Browser
                   │
              Developer Tools
                   ↑
                   │
              app.js.map
                   │
                   ↓
                 app.ts

Inti lecture ini: allowJs dan checkJs membantu project yang menggunakan JavaScript + TypeScript, sedangkan sourceMap membantu kita tetap debugging kode TypeScript asli meskipun browser sebenarnya menjalankan JavaScript hasil compilation.