Tujuan Pembelajaran

Memahami masalah yang diselesaikan TypeScript
Bisa bedakan JavaScript vs TypeScript
Mengerti static vs dynamic typing

Analogi

Diagram


      JavaScript (Dinamis):
  let data = 'hello'
  data = 42  // JavaScript: OK, runtime error nanti

TypeScript (Statis):
  let data: string = 'hello'
  data = 42  // TypeScript: ERROR! saat compile

TypeScript menambahkan type checking sebelum kode dijalankan — menangkap bug sebelum sampai ke user

Penjelasan Konsep

Kalau kamu sudah nyaman dengan JavaScript, mungkin kamu bertanya-tanya: kenapa sih butuh TypeScript? Bukannya JavaScript sudah cukup? Pertanyaan yang valid. Untuk proyek kecil dan script singkat, JavaScript memang cukup.

Tapi begitu aplikasimu bertumbuh — puluhan file, ratusan fungsi,

Banyak developer — JavaScript mulai terasa seperti membangun rumah tanpa blueprint.

Masalah JavaScript: Dynamic Typing

JavaScript adalah bahasa dinamis: variabel bisa berisi tipe apa pun kapan saja.

Ini fleksibel tapi berbahaya:

function greet(name) {
  return 'Halo, ' + name.toUpperCase();
}

greet(null);        // TypeError: Cannot read property 'toUpperCase' of null
greet(42);          // TypeError: name.toUpperCase is not a function
greet({});          // TypeError: name.toUpperCase is not a function

Error di atas baru muncul saat aplikasi berjalan — di production.

Dan ini baru satu fungsi sederhana.

Bayangkan ratusan fungsi di codebase yang sama.

TypeScript: Static Type Checking

TypeScript menambahkan sistem tipe ke JavaScript.

Kode TypeScript tidak berjalan di browser — ia di-compile ke JavaScript biasa.

Tapi sebelum compile, TypeScript memeriksa setiap tipe:

function greet(name: string): string {
  return 'Halo,

' + name.toUpperCase();
}

greet(null);     // Error: Argument of type 'null' is not assignable to 'string'
greet(42);       // Error: Argument of type 'number' is not assignable to 'string'

Error ini muncul saat DEVELOPMENT — sebelum kode sampai ke user.

Ini seperti punya asisten yang memeriksa pekerjaanmu sebelum diserahkan.

TypeScript adalah Superset JavaScript

Artinya: SEMUA kode JavaScript valid adalah kode TypeScript valid.

Kamu bisa migrasi secara bertahap — menambahkan tipe sedikit demi sedikit.

Tidak perlu rewrite dari nol.

Keuntungan TypeScript

Menangkap bug lebih awal: 15-20% bug bisa dicegah dengan type checking
Autocompletion yang akurat: IDE tahu tipe setiap variabel → autocomplete super power
Refactoring aman: Rename variabel/fungsi di seluruh codebase tanpa takut merusak
Dokumentasi hidup: Tipe berfungsi sebagai dokumentasi yang selalu up-to-date
Team collaboration: Developer lain bisa pahami API dari tipe tanpa membaca docs

Contoh Kode

typescript

// JavaScript — bug tersembunyi
function calculateTotal(price, quantity) {
  return price * quantity;
}

calculateTotal('100', 5);  // '100100100100100' (string repeat!)
calculateTotal(100, '5');  // NaN

// TypeScript — bug tertangkap saat development
function calculateTotal(price: number, quantity: number): number {
  return price * quantity;
}

calculateTotal('100', 5);  // Error: 'string' not assignable to 'number'
calculateTotal(100, 5);    // OK → 500

Penjelasan Kode

Baris 5-6: JavaScript tidak protes saat string dikirim ke fungsi matematika. Baris 14-15: TypeScript menangkap kesalahan tipe sebelum kode berjalan.

Prompt AI

Jelaskan perbedaan static vs dynamic typing dengan analogi. Berikan 3 contoh bug nyata yang bisa dicegah TypeScript di proyek yang pernah kamu alami.

Pertanyaan Reflektif

Coba tulis satu fungsi JavaScript yang punya bug tersembunyi (misalnya parameter yang salah tipe). Lalu tulis ulang dengan TypeScript dan lihat error apa yang muncul.