Masukkan Password
25 Mencegah Pengeluaran File JavaScript
Lecture ini membahas 3 compiler options tambahan di tsconfig.json:
noEmitnoEmitOnErrorremoveComments
Ketiganya berhubungan dengan apa yang dilakukan TypeScript terhadap hasil compilation, bukan dengan cara TypeScript menentukan tipe data.
Supaya gampang, kita mulai dari alur dasarnya:
app.ts
│
│ TypeScript Compiler (tsc)
▼
app.js
Secara default, TypeScript akan:
membaca
.ts→ mengecek error → menghasilkan.js
Nah, ketiga option ini bisa mengubah perilaku tersebut.
1. noEmit
Mari mulai dari:
{
"compilerOptions": {
"noEmit": true
}
}
Apa artinya?
noEmit berarti:
TypeScript tetap melakukan pengecekan/compilation, tetapi jangan menghasilkan file output.
Jadi:
app.ts
│
│ tsc
▼
cek TypeScript
│
├── ada error? → laporkan error
│
└── tidak ada error? → OK
❌ jangan buat app.js
2. Apa yang Dimaksud “Emit”?
Dalam TypeScript, istilah emit berarti kurang lebih:
menghasilkan output dari proses compilation.
Misalnya:
app.ts
dikompilasi menjadi:
app.js
Maka proses membuat app.js tersebut disebut emit.
Jadi:
emit
↓
generate output file
Sedangkan:
noEmit
↓
jangan generate output file
3. Contoh noEmit
Misalnya kita punya:
project/
│
├── src/
│ └── app.ts
│
├── dist/
│
└── tsconfig.json
tsconfig.json:
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"noEmit": true
},
"include": ["src"]
}
Kemudian:
tsc
TypeScript tetap memeriksa:
src/app.ts
Tetapi tidak menghasilkan:
dist/app.js
Jadi:
src/
└── app.ts
dist/
└── (kosong)
4. Lalu Buat Apa noEmit?
Pertanyaan pentingnya:
“Kalau tidak menghasilkan JavaScript, buat apa menjalankan TypeScript compiler?”
Karena kita mungkin hanya ingin melakukan type checking.
Misalnya kita punya:
function sum(num1: number, num2: number): number {
return num1 + num2;
}
sum(10, "20");
TypeScript akan mengatakan:
Error:
Argument of type 'string' is not assignable to parameter of type 'number'.
Tetapi kita tidak perlu menghasilkan:
app.js
Jadi noEmit bisa digunakan ketika tujuan kita adalah:
“Saya cuma mau memastikan code TypeScript saya tidak memiliki compiler/type error.”
5. Analogi noEmit
Bayangkan kamu punya sebuah ujian.
Kamu menyerahkan jawaban kepada guru.
Guru melakukan:
cek jawaban
↓
apakah ada kesalahan?
Tetapi guru tidak membuat produk baru dari jawabanmu.
Itulah noEmit.
TypeScript
↓
CHECK
↓
ada error atau tidak?
Bukan:
TypeScript
↓
CHECK
↓
GENERATE JavaScript
6. noEmit vs noEmitOnError
Nah, ini bagian yang sangat penting karena namanya mirip.
noEmit
"noEmit": true
Artinya:
Jangan pernah generate output.
Tidak peduli code benar atau salah.
Code benar
↓
noEmit = true
↓
❌ tidak ada .js
Dan:
Code error
↓
noEmit = true
↓
❌ tidak ada .js
Jadi noEmit sifatnya selalu tidak menghasilkan output.
7. noEmitOnError
Sekarang:
"noEmitOnError": true
Ini berbeda.
Artinya:
Kalau ada compiler error, jangan generate JavaScript.
Tetapi kalau semuanya benar:
generate JavaScript seperti biasa.
Jadi:
TypeScript
│
▼
Ada error?
/ \
YES NO
│ │
▼ ▼
❌ .js ✅ .js
8. Contoh noEmitOnError
Misalnya:
{
"compilerOptions": {
"outDir": "./dist",
"noEmitOnError": true
}
}
Kemudian:
function sum(num1: number, num2: number): number {
return num1 + num2;
}
sum(10, "20");
Ada error:
Argument of type 'string' is not assignable to parameter of type 'number'.
Karena:
"noEmitOnError": true
maka TypeScript tidak menghasilkan output JavaScript.
app.ts
│
▼
Type checking
│
▼
❌ ERROR
│
▼
❌ jangan emit .js
9. Kalau Error Diperbaiki?
Misalnya kita ubah:
sum(10, "20");
menjadi:
sum(10, 20);
Sekarang:
app.ts
│
▼
Type checking
│
▼
✅ NO ERROR
│
▼
generate app.js
Maka:
dist/
└── app.js
akan dibuat.
10. Kenapa noEmitOnError Berguna?
Bayangkan kita punya project besar:
src/
├── app.ts
├── user.ts
├── product.ts
├── order.ts
├── payment.ts
└── database.ts
Ternyata:
payment.ts
memiliki error.
Kalau kita tidak menggunakan noEmitOnError, TypeScript bisa tetap menghasilkan JavaScript berdasarkan konfigurasi/versi compiler yang digunakan, meskipun ada error.
Masalahnya:
Kita bisa mendapatkan output JavaScript yang berasal dari source code yang belum benar-benar lolos type checking.
Dengan:
"noEmitOnError": true
kita bisa menerapkan aturan:
“Kalau project masih punya compiler error, jangan keluarkan hasil build.”
Ini sangat berguna terutama dalam proses build.
11. Analogi noEmitOnError
Bayangkan sebuah pabrik.
Bahan mentah
↓
Quality Control
↓
Lulus?
Kalau:
❌ Tidak lulus
maka:
Jangan kirim produk.
Kalau:
✅ Lulus
maka:
Kirim produk.
Itulah:
noEmitOnError
12. Perbedaan noEmit dan noEmitOnError
Ini wajib diingat.
| Option | Ada error | Tidak ada error |
|---|---|---|
noEmit: true | ❌ tidak generate | ❌ tidak generate |
noEmitOnError: true | ❌ tidak generate | ✅ generate |
Atau:
noEmit
────────────
SELALU tidak emit
noEmitOnError
────────────
ERROR → tidak emit
NO ERROR → emit
Ini perbedaan paling penting dari lecture.
13. Jangan Sampai Tertukar dengan noEmit: false
Secara default, noEmit tidak aktif.
Misalnya:
"noEmit": false
Artinya:
TypeScript boleh menghasilkan output.
Sedangkan:
"noEmit": true
Artinya:
TypeScript tidak boleh menghasilkan output.
Biasanya kita cukup menulis:
"noEmit": true
atau tidak menuliskan option tersebut kalau ingin perilaku default.
14. Sekarang removeComments
Option berikutnya:
"removeComments": true
Artinya:
Hapus comments dari JavaScript output.
Misalnya TypeScript kita:
// This function calculates the sum
function sum(num1: number, num2: number): number {
return num1 + num2;
}
Tanpa removeComments, output JavaScript bisa tetap memiliki comment:
// This function calculates the sum
function sum(num1, num2) {
return num1 + num2;
}
Dengan:
"removeComments": true
output menjadi:
function sum(num1, num2) {
return num1 + num2;
}
Comment-nya dihapus.
15. Apa yang Terjadi dengan Comment?
Misalnya:
// User function
function greet(name: string) {
console.log("Hello " + name);
}
Dengan:
"removeComments": true
hasilnya kurang lebih:
function greet(name) {
console.log("Hello " + name);
}
Jadi:
.ts
│
├── code ───────────────→ .js
│
└── comments ──X───────→ tidak ikut
16. Kenapa Mau Menghapus Comments?
Salah satu alasan adalah:
Mengurangi output yang tidak diperlukan.
Bayangkan kita memiliki file besar dengan banyak comment:
// ------------------------------------------------
// User Service
// ------------------------------------------------
// This function is responsible for...
// It takes the user ID...
// It validates...
// etc...
function getUser() {
// ...
}
Kalau semua comment ikut dibawa ke JavaScript, ukuran file output bisa menjadi lebih besar.
Dengan:
"removeComments": true
comment tersebut tidak perlu ikut dalam hasil JavaScript.
17. Tapi Apakah removeComments Sama dengan Minification?
Tidak.
Ini penting.
removeComments hanya menghapus comment.
Misalnya:
// Calculate total
function calculateTotal(price: number, tax: number): number {
return price + tax;
}
Setelah removeComments:
function calculateTotal(price, tax) {
return price + tax;
}
Code-nya masih relatif sama.
Minification jauh lebih agresif.
Misalnya hasilnya bisa menjadi sesuatu seperti:
function calculateTotal(e,t){return e+t}
Minification adalah proses berbeda.
Jadi:
removeComments
↓
hapus comments
minification
↓
optimasi/minify output
↓
bisa menghapus whitespace,
memendekkan nama,
dan sebagainya
Biasanya minification ditangani oleh tooling lain seperti bundler/minifier.
18. Apakah Comment TypeScript Selalu Harus Dihapus?
Tidak.
Ini tergantung kebutuhan project.
Comment bisa sangat berguna ketika debugging atau membaca output JavaScript.
Misalnya:
// IMPORTANT: Don't call this function before initialization
Kalau comment tersebut masih dibutuhkan oleh orang yang membaca output, mungkin kita tidak ingin menghapusnya.
Tetapi untuk production build, sebagian project memilih:
"removeComments": true
agar output lebih bersih.
19. Ketiga Option Ini Kalau Digabung
Sekarang mari kita gabungkan:
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"noEmit": false,
"noEmitOnError": true,
"removeComments": true
},
"include": ["src"]
}
Kita bisa membacanya seperti ini:
rootDir
Source saya ada di src/
outDir
Output JavaScript masuk ke dist/
noEmit
Boleh generate output.
karena:
"noEmit": false
noEmitOnError
Tapi kalau ada error, jangan generate output.
removeComments
Kalau generate output, hapus comments.
20. Alur Lengkapnya
Dengan konfigurasi tersebut:
src/
│
│ .ts
▼
┌─────────────────┐
│ TypeScript │
│ Compiler │
└─────────────────┘
│
▼
Ada compiler error?
/ \
YES NO
│ │
▼ ▼
❌ no output remove comments
│
▼
dist/*.js
Ini mental model yang sangat bagus untuk diingat.
21. Contoh Lengkap
Source:
src/
└── app.ts
Isi app.ts:
// Calculate the sum
function sum(num1: number, num2: number): number {
return num1 + num2;
}
console.log(sum(10, 20));
Config:
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"noEmitOnError": true,
"removeComments": true
},
"include": ["src"]
}
Jalankan:
tsc
Hasil:
dist/
└── app.js
Isi app.js kurang lebih:
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum(10, 20));
Perhatikan:
// Calculate the sum
hilang karena:
"removeComments": true
22. Bagaimana Kalau Ada Error?
Misalnya kita ubah:
console.log(sum(10, "20"));
TypeScript akan mendeteksi:
❌ Argument of type 'string' is not assignable to parameter of type 'number'.
Karena:
"noEmitOnError": true
maka:
❌ app.js tidak dihasilkan
Jadi:
app.ts
│
▼
Type checking
│
▼
ERROR
│
▼
noEmitOnError = true
│
▼
❌ no app.js
23. Lalu Apa Hubungannya dengan noEmit?
Sekarang misalnya kita ubah:
"noEmit": true
Maka walaupun code sudah benar:
console.log(sum(10, 20));
hasilnya:
TypeScript check
│
▼
✅ valid
│
▼
noEmit = true
│
▼
❌ tidak ada app.js
Jadi:
noEmit
→ “Saya memang tidak ingin output.”
noEmitOnError
→ “Saya ingin output, tapi hanya kalau tidak ada error.”
24. Kapan Biasanya Menggunakan Masing-Masing?
noEmit
Cocok ketika:
Saya hanya ingin TypeScript melakukan checking.
Contohnya project menggunakan tool lain untuk menghasilkan output JavaScript.
Mental model:
TypeScript
↓
CHECK ONLY
noEmitOnError
Cocok ketika:
Saya ingin JavaScript hanya dihasilkan kalau source code lolos compiler.
Mental model:
TypeScript
↓
CHECK
↓
ERROR? ── YES → STOP
│
NO
↓
GENERATE JS
removeComments
Cocok ketika:
Saya ingin output JavaScript tidak membawa comment dari source TypeScript.
Mental model:
.ts
↓
compile
↓
.js tanpa comments
25. Hubungkan dengan outDir dari Lecture Sebelumnya
Kita sebelumnya belajar:
"rootDir": "./src",
"outDir": "./dist"
Sekarang kita bisa membuat konfigurasi yang lebih lengkap:
{
"compilerOptions": {
"target": "ES2016",
"lib": ["ES2016", "DOM"],
"rootDir": "./src",
"outDir": "./dist",
"noEmitOnError": true,
"removeComments": true,
"sourceMap": true
},
"include": ["src"]
}
Alurnya:
src/
│
│ .ts
▼
TypeScript Compiler
│
┌───────┴────────┐
│ │
ada error? tidak
│ │
YES ▼
│ removeComments
▼ │
❌ no output ▼
dist/
│
┌──────┴──────┐
│ │
.js .js.map
26. Ringkasan Semua Compiler Option yang Sudah Kita Pelajari
Sekarang materi kita sudah cukup banyak. Kita bisa kelompokkan seperti ini:
🟦 File selection
include
exclude
files
Menjawab:
File mana yang ikut compilation?
🟩 Source & output location
rootDir
outDir
Menjawab:
Source berada di mana dan output diletakkan di mana?
🟨 Output behavior
noEmit
noEmitOnError
removeComments
Menjawab:
Apakah output dibuat dan seperti apa hasilnya?
🟪 JavaScript compatibility
target
lib
Menjawab:
JavaScript versi apa yang ditargetkan dan API apa yang dikenali TypeScript?
🟥 Debugging & library
sourceMap
declaration
declarationMap
Menjawab:
Bagaimana debugging dan type information untuk output/library dilakukan?
27. Cheat Sheet Lecture Ini
| Option | Arti mudah |
|---|---|
noEmit | Jangan generate output sama sekali |
noEmitOnError | Jangan generate output kalau ada error |
removeComments | Hapus comment dari output JS |
Dan perbedaan terpenting:
noEmit = TRUE
│
└── ❌ TIDAK PERNAH menghasilkan JS
noEmitOnError = TRUE
│
├── ❌ ada error → tidak menghasilkan JS
│
└── ✅ tidak ada error → menghasilkan JS
Sedangkan:
removeComments = TRUE
│
└── JS tetap dibuat,
tetapi comments dihapus
28. Satu Kalimat untuk Mengingat Semuanya
Kalau nanti lupa, ingat tiga kalimat ini:
noEmit→ “Jangan buat file output.”
noEmitOnError→ “Buat output hanya kalau tidak ada error.”
removeComments→ “Kalau buat output, jangan bawa comments.”
Dan kalau digabung dengan materi sebelumnya:
include
↓
FILE APA yang diproses?
rootDir
↓
SOURCE ROOT di mana?
target
↓
OUTPUT JS versi apa?
outDir
↓
OUTPUT disimpan di mana?
noEmit
↓
OUTPUT dibuat atau tidak?
noEmitOnError
↓
OUTPUT hanya jika tidak ada error?
removeComments
↓
COMMENT ikut output atau tidak?
Dengan pola ini, tsconfig.json mulai terasa bukan seperti kumpulan option yang harus dihafalkan, tetapi seperti instruksi lengkap untuk TypeScript Compiler tentang apa yang harus diproses dan bagaimana hasilnya dibuat.