Dewa Baru Telah Tiba: Apa itu TypeScript?
Selamat datang di dunia TypeScript (TS)! 🎉
Setelah kamu menguasai Vanilla JavaScript, kamu mungkin merasa dirimu sudah tak terkalahkan. Namun, seiring
berjalannya waktu dan aplikasi yang kamu bangun semakin raksasa, kamu akan menyadari satu kelemahan fatal
dari JavaScript: sifatnya yang terlalu "Semaunya Sendiri" (Dynamic Typing).
TypeScript hadir bukan untuk menggantikan JavaScript, melainkan sebagai Baju Zirah (Armor)
yang melindungi kodemu dari *bugs* konyol yang sering menghancurkan website di level *Production*.
💣 1. Sifat "Bebas" JavaScript yang Menjadi Bencana
Di JavaScript, sebuah variabel bisa lahir sebagai Angka, dan di tengah jalan tiba-tiba berubah pikiran menjadi Teks. JavaScript tidak akan pernah marah kepadamu saat kamu sedang ngoding. Ia diam saja, membiarkanmu melakukan kesalahan, dan baru meledak saat websitenya sudah dipakai oleh Pelanggan!
// CONTOH KEBODOHAN JAVASCRIPT:
function hitungGaji(gajiPokok, bonus) {
return gajiPokok + bonus;
}
// Developer A memanggilnya dengan benar (Angka + Angka)
console.log( hitungGaji(5000, 1000) ); // Output: 6000 (Benar!) ✅
// Developer B (karena ngantuk) memasukkan Teks!
console.log( hitungGaji("5000", "1000") ); // Output: "50001000" (BENCANA!) ❌
// JS tidak memunculkan Error apapun di layar kodemu! Hal ini sangat mengerikan!
🛡️ 2. Sang Penyelamat: TypeScript (Static Typing)
TypeScript adalah bahasa pemrograman buatan Microsoft (dirilis tahun 2012) yang berjalan **DI ATAS** JavaScript.
TypeScript memaksa kita untuk memberikan **KTP (Tipe Data)** pada setiap variabel dan fungsi yang kita buat.
Jika JavaScript adalah polisi yang mengizinkan semua jenis kendaraan masuk tol, maka TypeScript adalah polisi
super ketat yang akan berteriak (Mengeluarkan *Error/Underline Merah*) saat kamu sedang mengetik kode, JAUH
sebelum website itu di-*publish*!
// KODE TYPESCRIPT (.ts)
// Kita pasangkan "KTP Angka" (: number) kepada parameter
function hitungGaji(gajiPokok: number, bonus: number) {
return gajiPokok + bonus;
}
hitungGaji(5000, 1000); // ✅ OK (Tidak ada masalah)
hitungGaji("5000", "1000");
// ❌ ERROR seketika di Layar Kodemu (VSCode)!
// Pesan TS: "Argument of type 'string' is not assignable to parameter of type 'number'."
⚔️ 3. Studi Kasus Live: Aplikasi Kalkulator Karyawan
Mari buktikan betapa rapuhnya Aplikasi berbasis murni JavaScript jika menerima bentuk input yang salah. Di demo bawah ini, coba masukkan Angka "100" digabung dengan Karakter Huruf "a" ke dalam form JS. Lalu lihat betapa malapetakanya hasil *Render* sistemmu!
🎯 Demo Live: Kompilasi Gagal
🟡 Aplikasi JavaScript (.js)
JS menerima semua input (meski itu Teks) tanpa divalidasi tipe angkanya.
🔵 Aplikasi TypeScript (.ts)
TS menjaga ketat form menggunakan `tipe: number`. Jika ada teks, Editor akan Error Merah!
Apakah kamu mencobanya? Pada Kotak Kuning (JS), jika kamu menginput angka "5000" dan "1000", hasilnya malah menyambung jadi "50001000" (Tragedi Bug). Sedangkan pada Kotak Biru (TS), bahkan saat kamu sekadar iseng memasukkan abjad huruf, "Radar Peringatan Dini" TS akan langsung menyergap kebodohan tersebut dan menolak aplikasinya di-*build/compile*. TypeScript menyelamatkan kariermu!