FlowingDev

TypeScript, dijelaskan: gimana ceritanya JavaScript punya sabuk pengaman dan airbag

Pelajari kenapa TypeScript itu JavaScript dengan kekuatan super, menambahkan static types untuk menangkap error lebih awal dan membuat kode lebih kuat dan mudah dimengerti.

Coba tool-nya: TypeScript Playground

Dalam satu kalimat

TypeScript adalah bahasa pemrograman yang dibangun di atas JavaScript dengan menambahkan "type system," yang ibaratnya kayak pengecek tata bahasa untuk datamu yang bisa menangkap banyak banget bug bahkan sebelum kodemu dijalankan.

Masalah yang dipecahkan

Bayangin era awal web. JavaScript lahir dengan terburu-buru (cerita terkenalnya sih cuma dalam 10 hari) cuma buat bikin halaman web sedikit lebih interaktif. Dulu, ia dirancang untuk skrip-skrip kecil: bikin animasi tombol, validasi formulir. Sifatnya dinamis, fleksibel, dan pemaaf. Sifat pemaafnya ini adalah kekuatan terbesarnya, dan seiring web yang semakin dewasa, jadi kelemahan terbesarnya juga.

Di JavaScript murni (vanilla), sebuah variabel bisa jadi apa aja sesuka hatinya. Bisa dimulai sebagai angka, lalu diubah jadi string, terus jadi object, dan akhirnya malah jadi undefined.

let myThing = 123;         // myThing itu angka
myThing = "Hello world"; // Sekarang jadi string
myThing = { id: 456 };   // Dan sekarang, jadi object

Untuk skrip 20 baris, ini oke-oke aja. Tapi untuk aplikasi 200.000 baris yang menjalankan layanan raksasa seperti Google Maps atau Figma, ini adalah resep jitu menuju kekacauan. Developer bisa saja salah ngasih tipe data ke sebuah function, yang berujung pada error legendaris undefined is not a function saat runtime—alias, di depan mata pengguna. Melakukan refactoring kode jadi mimpi buruk; ubah satu function, bisa jadi sepuluh bagian lain dari aplikasi rusak tanpa kamu sadari sampai semuanya terlambat.

Microsoft, yang menghadapi masalah persis seperti ini dengan proyek-proyek JavaScript skala besarnya, memutuskan untuk menertibkan kekacauan ini. Pada tahun 2012, mereka merilis TypeScript. Tujuannya bukan untuk menggantikan JavaScript, tapi untuk menyempurnakannya. TypeScript menambahkan lapisan keamanan dan prediktabilitas di atas bahasa yang sudah semua orang kenal, membuatnya cocok untuk aplikasi-aplikasi raksasa dan kompleks yang dituntut oleh web modern.

Cara kerjanya di balik layar

Keajaiban TypeScript terjadi sebelum kodenya sampai ke browser. Browser-mu nggak menjalankan TypeScript; ia menjalankan JavaScript jadul yang kita kenal. Tugas TypeScript adalah bertindak sebagai linter proaktif yang super cerdas selama proses development.

### TypeScript adalah Superset dari JavaScript

Ini konsep paling penting untuk dipahami. "Superset" artinya kode JavaScript apa pun yang valid juga merupakan kode TypeScript yang valid. Kamu bisa ambil file .js, ganti namanya jadi .ts, dan itu bakal jalan. TypeScript hanya menambahkan sintaks baru di atas JavaScript.

Tambahan utamanya adalah type annotations. Kamu sekarang bisa ngasih tahu TypeScript jenis data apa yang diharapkan.

// Ini JavaScript biasa
function getLength(someValue) {
  return someValue.length;
}

// Ini TypeScript
function getLengthTyped(someValue: string | any[]) {
  return someValue.length;
}

Di versi JavaScript, kalau kamu memanggil getLength(42), kamu bakal dapat runtime error karena angka 42 nggak punya properti length. Di versi TypeScript, editor kodemu dan compiler-nya bakal langsung teriak-teriak ke kamu, bilang kalau angka itu bukan argumen yang valid. Bug-nya ketangkep bahkan sebelum kamu sempat simpan filenya.

### Proses Transpilasi

Jadi kalau browser nggak menjalankan TypeScript, apa yang terjadi dengan sintaks tambahan itu? Sintaks itu dihapus dalam proses yang disebut transpilasi (transpilation).

Transpilasi adalah jenis kompilasi yang spesifik: konversi dari source-code-ke-source-code. Compiler TypeScript (sebuah program yang biasanya disebut tsc) membaca file .ts kamu, memeriksanya dari kesalahan tipe, lalu ngeluarin file .js bersih yang bisa dimengerti oleh browser mana pun.

Ini perbandingan sebelum-dan-sesudahnya:

Input TypeScript (.ts)

function greet(person: string, date: Date): string {
  return `Hello ${person}, today is ${date.toDateString()}!`;
}

Output JavaScript (.js)

function greet(person, date) {
  return "Hello ".concat(person, ", today is ").concat(date.toDateString(), "!");
}

Perhatikan bagaimana type annotations (: string, : Date) hilang sama sekali. Transpiler menggunakannya untuk memeriksa pekerjaanmu lalu membuangnya, menyisakan JavaScript yang bisa dieksekusi. TypeScript playground melakukan langkah transpilasi ini secara instan, langsung di browser, jadi kamu bisa lihat hasilnya secara real-time.

### Pengecekan Tipe dan Inferensi (Type Checking and Inference)

"Otak" dari TypeScript adalah type-checker-nya. Itulah bagian yang menganalisis kodemu dan memvalidasi bahwa semua tipenya cocok. Tapi kamu nggak selalu harus menulis tipe-nya sendiri. TypeScript cukup pintar untuk menebaknya dalam banyak kasus melalui proses yang disebut type inference.

let name = "Alice"; // TypeScript menebak (infers) `name` bertipe `string`
let age = 30;     // TypeScript menebak `age` bertipe `number`

// Kalau kamu coba ini, TypeScript akan error:
// Type 'number' is not assignable to type 'string'.
name = 42;

Kamu nggak perlu nulis let name: string = "Alice". TypeScript lihat kamu ngasih nilai string literal dan langsung menyimpulkan tipenya dengan benar. Ini membuat kodemu tetap bersih dan mudah dibaca sambil tetap memberikan manfaat keamanan penuh. Kamu hanya perlu menambahkan tipe secara eksplisit ketika TypeScript nggak bisa menebaknya sendiri, seperti pada parameter function atau variabel kosong.

Kisah dari dunia nyata

### Refactor Akbar

Produk andalan sebuah startup adalah sebuah monolith JavaScript yang luas. Tim awal bergerak cepat dan nggak terlalu peduli kerapian, dan sekarang tim baru yang harus menanggung akibatnya. Mereka perlu melakukan refactor pada modul inti yang menangani izin pengguna. Masalahnya? Nggak ada yang yakin bentuk object user seharusnya seperti apa. Apakah punya user.isAdmin atau user.role === 'admin'? Apakah user.id itu berupa angka atau string?

Setiap perubahan adalah pertaruhan. Mereka memutuskan untuk memperkenalkan TypeScript, file demi file. Mereka mulai dengan mendefinisikan interface User yang jelas:

interface User {
  id: number;
  email: string;
  role: 'admin' | 'editor' | 'viewer';
  lastLogin: Date;
}

Tiba-tiba, IDE mereka nyala terang kayak pohon Natal, menunjuk ke setiap tempat di codebase di mana mereka menggunakan object user secara tidak benar. Sebuah function mencoba mengakses user.isAdmin, yang tidak ada di interface baru mereka. Yang lain memberikan ID string padahal seharusnya angka. Proses refactor berubah dari permainan tebak-tebakan yang mengerikan menjadi proses yang sistematis dan terpandu.

Pelajaran: TypeScript mengubah refactoring yang kacau menjadi tugas engineering yang aman dan dapat diprediksi dengan menciptakan satu sumber kebenaran untuk struktur datamu.

### Bug API Gaib

Seorang front-end developer sedang membangun dasbor yang menampilkan data dari API pihak ketiga. Dokumentasi API dengan jelas menyatakan bahwa harga produk akan berupa angka, seperti 19.99. Dia pun menulis kode TypeScript-nya sesuai dengan itu: interface Product { name: string; price: number; }.

Kodenya berjalan dengan baik selama berminggu-minggu, sampai suatu hari seorang pengguna melaporkan bahwa perhitungan "Total" menunjukkan NaN (Not a Number). Setelah berjam-jam debugging, dia menemukan bahwa untuk produk tertentu yang langka, API mengembalikan harga sebagai string: "19.99". Di JavaScript, 10 + "19.99" menghasilkan string "1019.99", yang merusak semua perhitungannya.

Dengan TypeScript, dia bisa menangkap ini dari sumbernya. Dengan memvalidasi data API yang masuk terhadap interface Product-nya, ketidakcocokan tipe akan memunculkan error begitu data yang salah masuk ke sistemnya, bukan sepuluh langkah kemudian saat mencoba melakukan operasi matematika.

Pelajaran: TypeScript memberlakukan kontrak data, membuat aplikasimu tangguh terhadap perubahan tak terduga atau error dari API eksternal.

Kesalahan dan jebakan umum

  • Jalan pintas pakai any: TypeScript punya tipe khusus bernama any, yang pada dasarnya bilang ke compiler "percaya sama gue, gue tahu apa yang gue lakuin" dan mematikan semua pengecekan tipe untuk variabel itu. Terlalu sering menggunakan any itu kayak beli mobil karena fitur keselamatannya lengkap, eh malah dimatiin semua. Ini mengalahkan seluruh tujuan penggunaan TypeScript.
  • Mengabaikan error compiler: Kadang, kamu akan melihat garis berlekuk-lekuk merah dari TypeScript, tapi JavaScript hasil transpilasi-nya sepertinya berjalan baik-baik saja. Rasanya pengen banget buat ngabaikan error itu. Ini jebakan. Error itu adalah tanda peringatan adanya potensi bug saat runtime. Dengerin compiler-mu; dia cuma mau bantu.
  • Melawan type system: Pendatang baru sering frustrasi ketika TypeScript nggak mengizinkan mereka melakukan sesuatu. Alih-alih mencari cara yang benar untuk mengetikkan kode mereka, mereka mencoba mengakali compiler dengan type assertion (as any) atau cara lain. Ini biasanya berarti pemahaman mereka tentang alur data salah, dan compiler dengan benar mengidentifikasi masalah.
  • Lupa paket @types: Banyak library JavaScript populer tidak menyertakan definisi tipe mereka sendiri. Komunitas TypeScript memelihara repositori besar definisi tipe ini yang disebut DefinitelyTyped. Jika kamu menggunakan library seperti Lodash atau Express, kamu sering kali perlu menginstal paket @types/lodash yang sesuai untuk mendapatkan autocompletion dan pengecekan tipe yang benar.

Kenapa ini penting buat kamu

Kamu harus mulai melirik TypeScript (atau setidaknya mempertimbangkannya) ketika:

  • Proyek JavaScript-mu lebih dari segelintir file.
  • Kamu bekerja dalam tim dan perlu memastikan semua orang punya pemahaman yang sama tentang struktur data.
  • Kamu merasa menghabiskan lebih banyak waktu untuk debugging error undefined daripada menulis fitur baru.
  • Kamu ingin editor kodemu jadi asisten super canggih, yang menyediakan autocompletion luar biasa, alat refactoring, dan pesan error langsung di tempat.
  • Kamu sedang membangun aplikasi yang perlu dipelihara dan diskalakan dalam jangka waktu yang lama.

Singkatnya, TypeScript adalah standar profesional untuk pengembangan JavaScript modern. Mempelajarinya adalah investasi yang setimpal dengan hasilnya melalui lebih sedikit bug, kolaborasi yang lebih mudah, dan pengalaman development yang lebih meyakinkan.

Pelajari lebih dalam

Cara editor memahami kode

Warna berasal dari parser bahasa, bukan dari menjalankan program. CodeMirror dan Lezer mengenali token dan struktur secara lokal di browser. Saran menggabungkan kata kunci, nama lokal jika didukung, cuplikan dan referensi bawaan kecil; mengarahkan kursor ke simbol yang terdokumentasi menampilkan tanda tangannya. Saran bukan jaminan API tersedia di runtime. Diagnostik parser mendeteksi sintaks keliru jika didukung, tetapi tidak menggantikan pemeriksaan tipe atau eksekusi: sintaks valid tetap bisa gagal. Ruby dan Lua memakai mode berbasis token dengan diagnostik lebih terbatas. Tidak ada server bahasa jarak jauh; kode tetap di perangkat.

CodeMirror & Lezer: MIT.

Teori beres. Saatnya praktik — 100% di browser kamu.

Coba tool-nya: TypeScript Playground