Di lecture ini kita masuk ke bagian yang sangat penting dalam tsconfig.json, yaitu compilerOptions, khususnya option target.

Kalau lecture sebelumnya membahas “file mana yang dikompilasi?” (include, exclude, files), lecture ini mulai membahas “bagaimana TypeScript mengompilasi file tersebut?”

1. Apa itu compilerOptions?

Di dalam tsconfig.json, kita biasanya menemukan:

{
  "compilerOptions": {
    // berbagai pengaturan TypeScript
  }
}

compilerOptions adalah tempat kita memberi tahu TypeScript:

“Kalau kamu compile kode TypeScript saya, perlakukan dan hasilkan JavaScript-nya dengan aturan seperti apa?”

Jadi ada dua konsep besar:

tsconfig.json
│
├── include / exclude / files
│      ↓
│   File mana yang ikut di-compile?
│
└── compilerOptions
       ↓
    Bagaimana file tersebut di-compile?

Contohnya:

• include → masukkan src
• exclude → jangan masukkan test
• target → hasil JavaScript-nya harus menggunakan versi JavaScript apa?
• option lainnya → mengatur berbagai perilaku compiler lainnya

2. Tidak semua compilerOptions harus digunakan

Setelah menjalankan:

tsc --init

TypeScript biasanya menghasilkan tsconfig.json yang cukup panjang.

Di dalamnya ada banyak option:

{
  "compilerOptions": {
    // "target": "es2016",
    // "module": "commonjs",
    // "strict": true,
    // ...
  }
}

Jangan merasa harus memahami atau mengaktifkan semuanya.

Dalam project nyata, biasanya kita hanya mengatur option yang memang diperlukan.

Jadi prinsip sederhananya:

tsconfig.json menyediakan banyak pilihan, tetapi kita hanya menggunakan yang memang dibutuhkan project.

3. Option yang dibahas: target

Sekarang kita fokus ke:

{
  "compilerOptions": {
    "target": "es2016"
  }
}

target menentukan:

Versi JavaScript apa yang harus dihasilkan oleh TypeScript compiler?

Ini penting karena TypeScript bukan hanya mengubah:

TypeScript → JavaScript

tetapi juga bisa mengubah kode kita agar sesuai dengan versi JavaScript tertentu.

Secara sederhana:

TypeScript
    ↓
TypeScript Compiler
    ↓
JavaScript versi target

Misalnya:

"target": "es5"

berarti:

“Tolong hasilkan JavaScript yang kompatibel dengan ES5.”

Sedangkan:

"target": "es6"

berarti:

“Tolong hasilkan JavaScript yang menggunakan fitur ES6.”

4. Kenapa ada versi-versi JavaScript?

JavaScript berkembang dari waktu ke waktu.

Ada berbagai standar seperti:

ES3
ES5
ES6 / ES2015
ES2016
ES2017
ES2018
...

Perlu diketahui bahwa ES6 dan ES2015 pada dasarnya merujuk ke versi standar yang sama.

Contohnya:

ES6 = ES2015

Setelah ES6, penamaan tahunan mulai sering digunakan:

ES2015
ES2016
ES2017
ES2018
...

Semakin baru versinya, semakin banyak fitur JavaScript modern yang tersedia.

5. Contoh paling sederhana: let dan const

Mari lihat contoh dari lecture.

Misalnya kita punya TypeScript:

let test: string = "hello world";

const pi = 3.14;

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

Kemudian kita compile dengan:

{
  "compilerOptions": {
    "target": "es2016"
  }
}

Hasil JavaScript bisa tetap menggunakan:

let test = "hello world";
const pi = 3.14;

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

Kenapa?

Karena let dan const sudah didukung oleh versi JavaScript modern seperti ES6/ES2015.

6. Bagaimana kalau target-nya ES5?

Sekarang ubah:

"target": "es5"

Kemudian compile lagi.

TypeScript akan menghasilkan kode yang lebih kompatibel dengan JavaScript lama.

Kode:

let test: string = "hello world";

const pi = 3.14;

bisa ditransformasikan menjadi:

var test = "hello world";

var pi = 3.14;

Perhatikan perubahannya:

TypeScript:
let
const

       ↓ target ES5

JavaScript:
var
var

Kenapa?

Karena let dan const baru diperkenalkan pada ES6/ES2015.

ES5 belum mempunyai let dan const.

Jadi TypeScript mencoba mengubah kode modern tersebut menjadi bentuk yang bisa dimengerti oleh JavaScript versi lama.

7. Ini sebenarnya inti dari target

Bayangkan kita menulis:

const name = "John";

Kita mengatakan kepada TypeScript:

“Saya ingin menggunakan JavaScript modern.”

Tetapi kemudian kita menentukan:

"target": "es5"

Maka kita sebenarnya mengatakan:

“Walaupun saya menulis kode dengan fitur modern, tolong hasil akhirnya dibuat menggunakan JavaScript yang kompatibel dengan ES5.”

Jadi:

Kode TypeScript modern
        ↓
      tsc
        ↓
JavaScript ES5

8. Analogi sederhana: penerjemah bahasa

Bayangkan kamu menulis sebuah pesan menggunakan bahasa modern.

Kemudian pesan tersebut harus diberikan kepada orang yang hanya memahami bahasa lama.

Maka kamu membutuhkan penerjemah.

TypeScript compiler bertindak seperti penerjemah:

Kode yang kita tulis
       ↓
TypeScript Compiler
       ↓
Bahasa JavaScript target

Misalnya:

"Gunakan ES5"

berarti:

“Tolong terjemahkan kode saya ke bentuk JavaScript yang cocok dengan ES5.”

Sedangkan:

"Gunakan ES2016"

berarti:

“Tidak perlu terlalu mundur. Kamu boleh menghasilkan JavaScript dengan fitur ES2016.”

9. Kenapa kita membutuhkan target?

Nah, ini bagian yang paling penting.

Karena tidak semua browser mendukung fitur JavaScript yang sama.

Misalnya kita membuat aplikasi:

TypeScript Application

dan aplikasi tersebut harus berjalan di:

Browser modern

maka kita bisa menggunakan target JavaScript yang lebih modern.

Tetapi kalau aplikasi harus berjalan pada:

Browser yang sangat lama

kita mungkin perlu menghasilkan JavaScript versi yang lebih lama.

10. Contoh masalah browser

Misalnya kita menggunakan fitur JavaScript modern:

const user = {
    name: "John",
    age: 25
};

Browser modern memahami:

const user = ...

Tetapi browser lama mungkin tidak memahami const.

Kalau kita menggunakan:

"target": "es5"

TypeScript dapat mengubah:

const user = ...

menjadi:

var user = ...

Sehingga JavaScript yang dihasilkan lebih kompatibel dengan environment lama.

11. Contoh lain: Arrow Function

Misalnya kita menulis:

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

Kalau target kita cukup modern, hasilnya bisa tetap:

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

Tetapi jika target-nya ES5, TypeScript dapat mentransformasikannya menjadi bentuk function yang lebih lama:

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

Perhatikan:

Arrow function
      ↓
ES5
      ↓
function biasa

Jadi target bukan sekadar nama versi.

Ia memengaruhi bentuk JavaScript yang dihasilkan compiler.

12. Contoh lain: Destructuring

Misalnya kita menulis:

const user = {
    name: "John",
    age: 25
};

const { name, age } = user;

Destructuring adalah fitur JavaScript modern.

Kalau target-nya modern, hasilnya dapat tetap menggunakan:

const { name, age } = user;

Tetapi jika target lebih lama, TypeScript dapat mentransformasikannya ke bentuk yang lebih kompatibel.

Kurang lebih konsepnya:

var user = {
    name: "John",
    age: 25
};

var name = user.name;
var age = user.age;

Jadi kita sebagai developer bisa menulis:

const { name, age } = user;

tetapi compiler dapat menghasilkan kode yang lebih tua.

13. Jadi TypeScript memungkinkan kita menulis JavaScript modern

Ini salah satu manfaat besar TypeScript.

Misalnya kita ingin menggunakan fitur modern:

const
let
arrow function
destructuring
spread operator
class
dan lain-lain

Tetapi aplikasi kita masih harus mendukung environment yang lebih lama.

Kita bisa meminta TypeScript melakukan transformasi.

Contohnya:

{
  "compilerOptions": {
    "target": "es5"
  }
}

Maka konsepnya:

Developer
   ↓
Menulis kode modern
   ↓
TypeScript
   ↓
Compiler melakukan transformasi
   ↓
JavaScript ES5
   ↓
Browser lama

14. Modern browser vs older browser

Sekarang kita bisa memahami alasan pemilihan target.

Jika target browser modern

Misalnya:

{
  "compilerOptions": {
    "target": "es2020"
  }
}

Kita bisa menghasilkan JavaScript yang lebih modern.

Keuntungannya:

• hasil kode bisa lebih dekat dengan kode modern yang kita tulis
• bisa memanfaatkan fitur JavaScript modern
• tidak perlu melakukan banyak transformasi ke syntax lama

Jika target browser lama

Misalnya:

{
  "compilerOptions": {
    "target": "es5"
  }
}

TypeScript akan berusaha menghasilkan JavaScript yang lebih tua/kompatibel.

Konsekuensinya:

Target lebih lama
       ↓
Lebih banyak transformasi
       ↓
Kode output lebih legacy

15. Tetapi ada satu hal penting: target bukan berarti otomatis membuat SEMUA fitur modern bekerja

Ini perlu kamu pahami karena sering terjadi miskonsepsi.

Misalnya kita menggunakan:

Promise
fetch
Map
Set
Array.prototype.includes

Mengubah:

"target": "es5"

tidak otomatis membuat semua API tersebut tersedia di browser lama.

Ada perbedaan antara:

Syntax

Contohnya:

const x = 10;

const add = (a, b) => a + b;

TypeScript dapat mentransformasikan syntax modern ke syntax lama.

API / built-in

Contohnya:

Promise
Map
Set
fetch

Ini bukan sekadar syntax yang bisa diubah menjadi bentuk lama.

Karena itu, untuk kompatibilitas browser lama, sering kali kita juga perlu memperhatikan library (lib) dan polyfill.

Untuk level lecture ini, cukup pegang konsep:

target terutama menentukan versi JavaScript/syntax yang dihasilkan compiler.

16. target tidak sama dengan include

Ini penting karena lecture sebelumnya membahas include, exclude, dan files.

Sekarang bandingkan:

include

Menentukan:

File mana yang masuk compilation?

Contoh:

{
  "include": ["src"]
}

Artinya secara sederhana:

src/
 ↓
file-file yang sesuai
 ↓
ikut compilation

target

Menentukan:

JavaScript hasil compilation akan ditargetkan ke versi apa?

Contoh:

{
  "compilerOptions": {
    "target": "es5"
  }
}

Jadi:

include
   ↓
FILE MANA?

target
   ↓
HASIL JAVASCRIPT-NYA SEPERTI APA?

17. compilerOptions vs include/exclude/files

Sekarang kita bisa membuat gambaran besar:

                 tsconfig.json
                       │
          ┌────────────┴────────────┐
          │                         │
     File selection            Compiler options
          │                         │
          │                         │
   include/exclude/files          target
          │                       module
          │                       strict
          │                       dll
          ↓
   File mana yang              Bagaimana
   di-compile?                 cara compile?

Jadi:

include, exclude, files

Fokus pada:

WHAT?

File apa yang diproses?

compilerOptions

Fokus pada:

HOW?

Bagaimana file tersebut diproses?

18. Contoh project sederhana

Misalnya project kita:

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

Kita bisa punya:

{
  "compilerOptions": {
    "target": "es5"
  },
  "include": ["src"],
  "exclude": ["test"]
}

Artinya:

include

"include": ["src"]

→ file dari src masuk compilation.

exclude

"exclude": ["test"]

→ folder test dikecualikan dari root file selection.

target

"target": "es5"

→ JavaScript hasil compilation ditargetkan ke ES5.

Jadi semuanya punya pekerjaan masing-masing.

19. Alur lengkapnya

Sekarang gabungkan lecture sebelumnya dan lecture ini:

              tsconfig.json
                    │
          ┌─────────┴─────────┐
          │                   │
      File Selection      compilerOptions
          │                   │
    include/exclude           target
    files                     │
          │                   │
          └─────────┬─────────┘
                    ↓
             TypeScript Compiler
                    ↓
              JavaScript
                    ↓
                Browser

Misalnya:

{
  "compilerOptions": {
    "target": "es5"
  },
  "include": ["src"],
  "exclude": ["test"]
}

Maka secara mental:

“TypeScript, ambil source dari src, jangan jadikan test sebagai bagian project compilation, dan hasilkan JavaScript dengan target ES5.”

20. Kenapa tidak selalu menggunakan target terbaru?

Pertanyaan bagus:

“Kalau versi JavaScript terbaru lebih bagus, kenapa tidak selalu pakai versi terbaru?”

Karena environment yang menjalankan aplikasi kita menentukan pilihan tersebut.

Misalnya kita membuat aplikasi untuk:

Chrome terbaru
Firefox terbaru
Safari terbaru
Edge terbaru

Kita bisa lebih nyaman menggunakan target modern.

Tetapi jika aplikasi harus mendukung environment yang jauh lebih lama, kita perlu mempertimbangkan compatibility.

Jadi target ditentukan berdasarkan:

Target browser/environment
          ↓
Fitur JavaScript yang didukung
          ↓
Target TypeScript

21. Cara berpikir yang paling mudah

Jangan menghafal:

“target = ES5”

Lebih baik pahami:

target = “JavaScript versi berapa yang ingin saya hasilkan?”

Misalnya:

"target": "es5"

Baca:

“Hasilkan JavaScript yang menargetkan ES5.”

"target": "es6"

Baca:

“Hasilkan JavaScript yang menargetkan ES6.”

"target": "es2016"

Baca:

“Hasilkan JavaScript yang menargetkan ES2016.”

22. Analogi terakhir: menerjemahkan buku

Bayangkan kamu menulis buku menggunakan bahasa modern.

Kemudian kamu punya tiga pembaca:

Pembaca A → mengerti bahasa terbaru
Pembaca B → mengerti bahasa menengah
Pembaca C → hanya mengerti bahasa lama

Kamu bisa membuat versi:

Buku versi modern
Buku versi menengah
Buku versi lama

TypeScript compiler melakukan sesuatu yang mirip.

                 TypeScript
                     │
                     ↓
              TypeScript Compiler
               /        |        \
              /         |         \
           ES5        ES2016     ES2020
             ↓           ↓          ↓
        environment   modern     modern
           lama       browser     browser

Kita tetap bisa menulis source code menggunakan TypeScript, tetapi menentukan target output sesuai environment yang ingin kita dukung.

23. Ringkasan lecture

Ada beberapa poin yang wajib kamu ingat:

① compilerOptions

Digunakan untuk mengatur bagaimana TypeScript compiler bekerja.

{
  "compilerOptions": {
    ...
  }
}

② target

Menentukan versi JavaScript target yang dihasilkan compiler.

{
  "compilerOptions": {
    "target": "es5"
  }
}

③ Target memengaruhi output JavaScript

Contoh:

const pi = 3.14;

Target modern:

const pi = 3.14;

Target ES5:

var pi = 3.14;

④ Target berkaitan dengan browser/environment

Browser modern
    ↓
target modern

Browser lama
    ↓
target lebih lama

⑤ include/exclude/files dan target berbeda

🧠 Cheat sheet

Kalau besok kamu lupa, ingat kalimat ini:

tsconfig.json = aturan project TypeScript.

include/exclude/files = menentukan FILE MANA yang diproses.

compilerOptions = menentukan BAGAIMANA file diproses.

target = menentukan JAVASCRIPT VERSI APA yang menjadi target output.

Dan gambaran besarnya:

                 TypeScript
                     │
                     ↓
               tsconfig.json
                     │
          ┌──────────┴──────────┐
          ↓                     ↓
   File selection          compilerOptions
          │                     │
 include/exclude/files        target
          │                     │
          └──────────┬──────────┘
                     ↓
             TypeScript Compiler
                     ↓
              JavaScript output
                     ↓
                  Browser

Inti lecture ini: kita boleh menulis TypeScript dengan syntax/f fitur JavaScript yang modern, lalu menggunakan target untuk menentukan seberapa modern JavaScript hasil compile-nya.