Lecture ini membahas lib di dalam compilerOptions pada tsconfig.json. Konsepnya memang sedikit lebih membingungkan daripada target, karena target dan lib saling berhubungan tetapi fungsinya berbeda.

Kalau target menjawab:

“JavaScript versi apa yang harus dihasilkan?”

maka lib menjawab:

“Fitur dan API apa yang boleh dianggap TypeScript tersedia di environment kita?”

Mari kita bahas pelan-pelan.

1. Mengingat kembali compilerOptions

Sebelumnya kita belajar:

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

compilerOptions digunakan untuk mengatur bagaimana TypeScript compiler memperlakukan dan meng-compile kode kita.

Salah satu option di dalamnya adalah:

"lib": []

lib adalah singkatan dari library.

2. Apa sebenarnya fungsi lib?

Secara sederhana:

lib memberi tahu TypeScript fitur JavaScript dan API environment apa saja yang tersedia dan boleh digunakan oleh kode kita.

Misalnya kita menulis:

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

Pertanyaannya:

Bagaimana TypeScript tahu bahwa document itu ada?

Karena TypeScript memiliki declaration files yang mendeskripsikan API yang tersedia.

Misalnya TypeScript mengetahui bahwa browser mempunyai:

document
window
console
HTMLElement
addEventListener
localStorage
setTimeout
dll.

Informasi tentang hal-hal tersebut diberikan melalui library declaration yang sesuai.

3. Kenapa TypeScript perlu tahu tentang environment?

Ini bagian yang sangat penting.

TypeScript tidak hanya digunakan untuk browser.

TypeScript bisa digunakan untuk:

Frontend
   ↓
Browser

Backend
   ↓
Node.js

Environment lainnya

Dan setiap environment mempunyai API yang berbeda.

Browser

Browser mempunyai:

document
window
HTMLElement
localStorage
addEventListener

Contoh:

document.getElementById("btn");

Masuk akal di browser.

Node.js

Node.js tidak menyediakan DOM seperti browser.

Jadi:

document.getElementById("btn");

tidak tersedia secara normal di Node.js.

Artinya TypeScript harus tahu:

“Kode ini akan dijalankan di environment apa?”

Nah, salah satu cara TypeScript mengetahui API yang tersedia adalah melalui lib.

4. Contoh dari lecture: document

Misalnya kita punya HTML:

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

Kemudian di TypeScript:

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

Kemudian:

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

Kalau kamu terbiasa JavaScript, kode tersebut terlihat normal.

Tetapi TypeScript harus mengetahui:

Apa itu document?

Apakah:

document

merupakan variable yang valid?

Kalau valid:

document.getElementById()

Apakah method tersebut ada?

Kemudian:

button.addEventListener()

Apakah method tersebut tersedia?

TypeScript mendapatkan informasi tersebut dari DOM library declarations.

5. Apa itu declaration files?

Ini konsep penting.

TypeScript perlu mengetahui bentuk dari berbagai API.

Misalnya secara sederhana ada informasi seperti:

interface Document {
    getElementById(id: string): HTMLElement | null;
}

Dan:

interface EventTarget {
    addEventListener(...): void;
}

Informasi seperti ini bukan implementation JavaScript-nya.

Ini hanya informasi kepada TypeScript:

“Hey TypeScript, browser mempunyai object bernama document, dan object tersebut mempunyai method getElementById.”

Jadi declaration files bisa kita bayangkan seperti buku katalog/API documentation yang dibaca compiler.

6. lib menentukan declaration library yang digunakan

Sekarang kita bisa memahami kalimat lecture:

“lib specifies a set of bundled library declaration files that describes the target runtime environment.”

Artinya kurang lebih:

lib menentukan kumpulan declaration files yang menjelaskan fitur/API dari environment tempat kode kita dianggap akan berjalan.

Contohnya:

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

Artinya secara sederhana:

TypeScript project
       │
       ├── ES2016 features
       │
       └── Browser DOM APIs

TypeScript akan memahami fitur-fitur ES2016 dan API DOM.

7. Hubungan target dan lib

Nah, ini bagian yang sering bikin bingung.

Kita punya:

{
  "compilerOptions": {
    "target": "ES2016"
  }
}

Ada target.

Kemudian ada:

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

Ada lib.

Kelihatannya mirip, tetapi tujuannya berbeda.

target

target menentukan:

JavaScript output mau dibuat dalam versi apa?

Contoh:

"target": "ES5"

Berarti output JavaScript ditargetkan ke ES5.

lib

lib menentukan:

Fitur/API apa yang harus diketahui TypeScript dan dianggap tersedia?

Contoh:

"lib": ["ES2016", "DOM"]

Berarti TypeScript diberi tahu:

• fitur JavaScript ES2016 tersedia
• DOM API browser tersedia

8. Analogi sederhana

Bayangkan kamu sedang membuat aplikasi untuk sebuah restoran.

target

Seperti mengatakan:

“Menu yang kita cetak harus menggunakan format yang bisa dipahami mesin lama.”

Ini berkaitan dengan output.

lib

Seperti mengatakan:

“Dapur kita mempunyai oven, kulkas, kompor, dan blender.”

Ini berkaitan dengan fasilitas/API yang dianggap tersedia.

Jadi:

target
  ↓
Bagaimana OUTPUT dibuat?

lib
  ↓
Apa saja yang DIANGGAP TERSEDIA?

9. Kenapa ketika lib tidak ditulis semuanya tetap bekerja?

Ini pertanyaan penting dari lecture.

Misalnya kita hanya punya:

{
  "compilerOptions": {
    "target": "ES2016"
  }
}

Tetapi kita tetap bisa menulis:

document.getElementById("btn");

Kenapa?

Karena ketika lib tidak kita tentukan secara eksplisit, TypeScript menggunakan default library berdasarkan konfigurasi target dan konteks compiler.

Untuk project browser biasa, default tersebut mencakup library JavaScript yang sesuai dan DOM.

Jadi kita tidak harus selalu menulis:

"lib": ["ES2016", "DOM"]

10. Ketika lib tidak ditulis

Misalnya:

{
  "compilerOptions": {
    "target": "ES2016"
  }
}

Secara konsep:

lib tidak ditentukan
        ↓
TypeScript menggunakan default
        ↓
Library yang sesuai dengan target
+ environment default yang relevan

Itulah mengapa kode seperti:

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

bisa dikenali oleh TypeScript.

11. Apa yang terjadi ketika kita menulis lib sendiri?

Nah, di sinilah bagian pentingnya.

Misalnya kita ubah:

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

Sekarang kita tidak lagi mengatakan:

“Gunakan default library.”

Kita secara eksplisit mengatakan:

“Gunakan library yang saya tentukan.”

Kalau array-nya kosong:

"lib": []

maka TypeScript tidak mendapatkan library declaration tersebut.

Akibatnya kode seperti:

document.getElementById("btn");

bisa menghasilkan error karena TypeScript tidak mengetahui document.

Bahkan:

console.log("Hello");

juga bisa bermasalah tergantung library yang tersedia.

12. Kenapa Map juga bisa error?

Lecture memberikan contoh lain.

Misalnya:

const users = new Map();

Map adalah salah satu built-in JavaScript.

TypeScript perlu mempunyai declaration yang menjelaskan Map.

Kalau library ES yang relevan tidak tersedia, TypeScript bisa mengatakan:

Cannot find name 'Map'

Artinya bukan:

“JavaScript tidak mempunyai Map.”

Tetapi:

“TypeScript tidak mempunyai informasi declaration bahwa Map tersedia dalam environment/library yang kamu pilih.”

Ini perbedaan yang sangat penting.

13. Jadi lib bukan library yang kita install

Ini juga perlu diperhatikan.

Ketika melihat:

"lib": ["ES2016", "DOM"]

jangan berpikir:

“Oh, TypeScript akan download library ES2016 dan DOM.”

Bukan begitu.

lib di sini lebih berkaitan dengan type declarations yang digunakan TypeScript untuk memahami API.

Jadi secara sederhana:

lib
 ↓
TypeScript type information
 ↓
Compiler tahu API apa yang tersedia

Bukan:

lib
 ↓
download JavaScript library

14. Contoh DOM

Kalau kita menulis:

"lib": ["DOM"]

kita memberitahu TypeScript bahwa API browser/DOM tersedia.

Misalnya:

document
window
HTMLElement
HTMLButtonElement
Event
addEventListener

dan berbagai API DOM lainnya dapat dikenali TypeScript.

Contoh:

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

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

TypeScript bisa memahami konsep DOM tersebut karena adanya DOM declarations.

15. Contoh library ES

Selain DOM, ada library seperti:

ES5
ES2015
ES2016
ES2017
ES2018
ES2019
ES2020
...

Library tersebut memberikan informasi mengenai built-in JavaScript sesuai versi yang bersangkutan.

Contohnya:

Map
Set
Promise
Symbol
Array.from
Object.assign

dan berbagai API/built-in lainnya.

16. Contoh konfigurasi

Misalnya:

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

Kita bisa membaca konfigurasi ini seperti:

“Output JavaScript saya ditargetkan ke ES2016, dan TypeScript harus menganggap fitur ES2016 serta API DOM tersedia.”

17. Bagaimana dengan DOM.Iterable?

Lecture juga menyebut:

"DOM.Iterable"

Ini merupakan library declaration tambahan yang berkaitan dengan iterable DOM collections.

Misalnya beberapa collection DOM dapat digunakan dalam konteks iteration tertentu.

Jadi secara sederhana:

DOM
↓
API DOM dasar

DOM.Iterable
↓
dukungan type untuk collection DOM yang iterable

Untuk tahap awal, tidak perlu menghafal detail internalnya.

Yang penting pahami bahwa:

DOM.Iterable adalah salah satu library declaration yang bisa dipilih ketika kita membutuhkan type information untuk iterable DOM APIs.

18. Bagaimana dengan ScriptHost?

Lecture juga menyebut:

"ScriptHost"

Ini adalah kumpulan declaration untuk API Windows Script Host.

Ini bukan sesuatu yang biasanya kamu perlukan dalam aplikasi web modern.

Jadi jangan terlalu fokus menghafalnya.

Yang lebih penting untuk kamu pahami sekarang:

ES2016 → JavaScript built-in/features
DOM    → Browser DOM APIs
DOM.Iterable → iterable DOM APIs
ScriptHost   → Windows Script Host APIs

19. Default library yang dibahas lecture

Lecture menjelaskan bahwa ketika target-nya misalnya ES2016 dan lib tidak ditentukan, TypeScript menggunakan default library.

Dalam konteks konfigurasi lecture, kira-kira konsepnya:

"target": "ES2016"

dan default library mencakup hal-hal seperti:

ES2016
DOM
DOM.Iterable
ScriptHost

Kemudian lecture menunjukkan bahwa kita bisa menuliskannya secara eksplisit:

"lib": [
    "ES2016",
    "DOM",
    "DOM.Iterable",
    "ScriptHost"
]

Sehingga hasilnya secara konsep sama dengan membiarkan lib menggunakan default yang sesuai.

Catatan: detail default lib dapat bergantung pada versi TypeScript dan konfigurasi lain, jadi jangan menganggap daftar tersebut sebagai aturan universal untuk setiap versi TypeScript.

20. Kenapa kita harus mengatur lib secara manual?

Dalam banyak project sederhana, sebenarnya kita tidak perlu mengatur lib.

Default sudah cukup.

Tetapi ada situasi tertentu ketika kita ingin mengontrol environment dengan lebih spesifik.

Misalnya kita membuat aplikasi yang bukan untuk browser.

Contoh: Node.js

Bayangkan kita membuat backend:

TypeScript
   ↓
Node.js

Kita tidak menggunakan:

document
window
HTMLElement

karena API tersebut berasal dari browser.

Jadi library DOM tidak relevan dengan runtime Node.js.

Untuk project tertentu, kita mungkin mengatur library/type environment yang sesuai dengan kebutuhan project.

21. target ES5 tetapi lib ES2016?

Ini contoh yang sangat bagus untuk memahami perbedaan keduanya.

Misalnya:

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

Artinya:

target: ES5

“Hasil JavaScript saya harus ditransformasikan ke ES5.”

lib: ES2016

“TypeScript boleh menganggap API/f fitur ES2016 tersedia.”

Jadi:

target = output
lib    = available type/API knowledge

Ini bisa berbeda.

Tetapi kamu harus hati-hati: kalau runtime sebenarnya tidak mendukung API ES2016 seperti Map, deklarasi lib saja tidak membuat API tersebut muncul di browser.

22. Ini poin yang sangat penting

Misalnya:

"lib": ["ES2016"]

Kemudian kamu menulis:

const map = new Map();

TypeScript bisa saja mengatakan:

“Oke, Map valid.”

Tetapi kalau browser yang menjalankan JavaScript tersebut ternyata tidak memiliki Map, aplikasi tetap bisa gagal saat runtime.

Karena:

lib
 ↓
Memberi tahu TypeScript tentang API

bukan:

lib
 ↓
Membuat API tersebut tersedia di browser

Jadi jangan salah mengartikan lib sebagai polyfill.

23. lib bukan polyfill

Ini sangat penting untuk diingat.

Misalnya:

const promise = new Promise(...);

dan TypeScript mengetahui Promise karena:

"lib": ["ES2015"]

Itu tidak berarti browser lama tiba-tiba mendapatkan implementasi Promise.

Untuk menyediakan API yang belum tersedia di runtime, kita mungkin membutuhkan polyfill atau strategi kompatibilitas lainnya.

Jadi:

lib
 ↓
TypeScript tahu API tersebut

polyfill
 ↓
Runtime mendapatkan implementasi API tersebut

Keduanya berbeda.

24. Hubungan lengkap target + lib

Sekarang kita buat tabel.

Cara mengingat:

include/exclude/files
        ↓
    FILE APA?

target
        ↓
    OUTPUT SEPERTI APA?

lib
        ↓
    API APA YANG DIKENALI?

25. Kenapa TypeScript tidak otomatis tahu document?

Ini pertanyaan fundamental dari lecture.

Misalnya TypeScript melihat:

document.getElementById("btn");

TypeScript tidak bisa hanya berpikir:

“Oh, ini JavaScript, pasti ada document.”

Karena TypeScript juga bisa digunakan untuk:

Browser
Node.js
Deno
dan environment lainnya

document bukan global API yang tersedia di semua environment.

Jadi TypeScript membutuhkan informasi type/declaration tentang environment tersebut.

Untuk browser:

DOM library
    ↓
document
window
HTMLElement
dll.

Untuk environment lain, library/type declaration yang berbeda mungkin dibutuhkan.

26. Cara membayangkan lib

Bayangkan TypeScript mempunyai sebuah kamus API.

               TypeScript
                   │
          ┌────────┼────────┐
          ↓        ↓        ↓
        ES2016    DOM    ScriptHost
          │        │        │
          ↓        ↓        ↓
        Map      document   WScript
        Set      window     dll.
        Promise  HTMLElement

Ketika kita menentukan:

"lib": ["ES2016", "DOM"]

kita mengatakan:

“Gunakan kamus ES2016 dan kamus DOM.”

Sehingga TypeScript tahu API apa yang valid.

27. Kenapa ada error saat lib dikosongkan?

Misalnya:

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

Kemudian:

document.getElementById("btn");

TypeScript mungkin mengatakan:

Cannot find name 'document'

Dan:

const map = new Map();

bisa menghasilkan:

Cannot find name 'Map'

Bukan karena JavaScript tiba-tiba kehilangan document dan Map.

Tetapi karena kita mengatakan kepada TypeScript:

“Jangan gunakan declaration library tersebut.”

28. Menambahkan kembali library

Kita bisa memperbaikinya dengan:

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

Sekarang TypeScript tahu:

ES2016
  ↓
Map, Set, dll.

DOM
  ↓
document, window, HTMLElement, dll.

29. Kenapa lecture menggunakan lib bersama target?

Karena keduanya sering digunakan bersama untuk menentukan environment.

Misalnya:

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

Bisa dibaca:

“Saya ingin menghasilkan JavaScript dengan target ES2016, dan kode saya dianggap berjalan dalam environment yang menyediakan fitur ES2016 serta browser DOM API.”

Itulah mental model yang bagus.

30. Kesalahan pemahaman yang harus dihindari

❌ Salah:

“lib menentukan JavaScript output.”

Yang menentukan output adalah terutama:

target

❌ Salah:

“target: ES5 berarti TypeScript hanya boleh menggunakan fitur ES5.”

Tidak sesederhana itu.

target terutama menentukan transformasi/output JavaScript.

❌ Salah:

“lib: DOM membuat document tersedia saat runtime.”

Tidak.

lib hanya membuat TypeScript memiliki type declarations/informasi tentang DOM.

❌ Salah:

“lib adalah package JavaScript yang di-download.”

Bukan.

lib merujuk pada kumpulan declaration libraries yang digunakan TypeScript.

31. Analogi super sederhana

Bayangkan kamu bekerja di sebuah kantor.

target

Bos berkata:

“Semua laporan harus dibuat dalam format PDF versi lama.”

Itu menentukan hasil/output.

lib

Bos juga berkata:

“Di kantor ini tersedia printer, scanner, dan mesin fotokopi.”

Itu menentukan fasilitas yang dianggap tersedia.

Jadi:

target
↓
Format hasil

lib
↓
Fasilitas/API yang tersedia menurut TypeScript

32. Alur keseluruhannya

Sekarang gabungkan semua yang sudah kita pelajari:

                    tsconfig.json
                         │
              ┌──────────┴──────────┐
              │                     │
        File selection         compilerOptions
              │                     │
     include/exclude/files     ┌────┴─────┐
                               │          │
                            target       lib
                               │          │
                               ↓          ↓
                           Output JS   API/type
                                       declarations
                               │          │
                               └────┬─────┘
                                    ↓
                          TypeScript Compiler
                                    ↓
                             JavaScript output
                                    ↓
                               Runtime

33. Contoh konfigurasi final

Misalnya project browser kita menggunakan:

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

Kita bisa membacanya:

Target: hasil JavaScript diarahkan ke ES2016.

ES2016 lib: TypeScript mengenali fitur/built-in ES2016.

DOM: TypeScript mengenali browser DOM APIs.

DOM.Iterable: TypeScript mengenali type terkait iterable DOM collections.

ScriptHost: TypeScript mengenali API Windows Script Host yang relevan.

🧠 Cheat Sheet

Ini yang paling penting untuk dibawa dari lecture:

                compilerOptions
                     │
          ┌──────────┴──────────┐
          ↓                     ↓
       target                  lib
          ↓                     ↓
 "JavaScript versi       "API/f fitur apa
  apa yang dihasilkan?"   yang dikenal TS?"

target

"target": "ES5"

→ JavaScript output ditargetkan ke ES5.

lib

"lib": ["ES2016", "DOM"]

→ TypeScript diberi declaration information untuk:

ES2016 APIs
+
Browser DOM APIs

Ingat juga:

target ≠ lib

target → bagaimana output JavaScript dibuat.

lib → API apa yang TypeScript anggap tersedia.

Dan yang paling penting:

lib tidak menyediakan implementation API di runtime. Ia hanya memberi TypeScript informasi/type declarations tentang API tersebut.

Kalau kamu sudah memahami kalimat “target mengatur output, lib mengatur apa yang TypeScript kenali sebagai API yang tersedia”, berarti inti lecture ini sudah kamu kuasai.