Pengenalan TypeScript & Cara Kerjanya
Apa itu TypeScript, masalah apa yang dipecahkannya, bagaimana kode .ts menjadi .js, cara memasang dan menjalankannya, serta cara latihan di kursus ini.
Apa itu TypeScript?
TypeScript (TS) adalah JavaScript yang diberi tipe. Dibuat oleh Microsoft (dipimpin Anders Hejlsberg, pencipta C# dan Delphi) dan dirilis tahun 2012. Semua kode JavaScript yang valid otomatis valid sebagai TypeScript — TypeScript hanya menambahkan sistem tipe di atasnya. Karena itu TypeScript disebut superset dari JavaScript.
Bayangkan JavaScript seperti berkendara di jalan tanpa rambu: kamu bebas, tapi baru sadar salah belok setelah tersesat. TypeScript seperti GPS dengan peringatan: sebelum kamu berangkat (sebelum kode dijalankan), ia sudah memberi tahu "belok ini akan menabrak tembok".
Masalah yang dipecahkan
Di JavaScript, kesalahan tipe baru ketahuan saat program berjalan — sering kali saat sudah dipakai pengguna:
function hitungTotal(harga, jumlah) {
return harga * jumlah
}
hitungTotal("5000", "dua") // NaN — tidak ada peringatan sama sekali
user.nmaa // undefined — typo tidak ketahuan
Di TypeScript, kesalahan yang sama langsung ditandai merah di editor sebelum program dijalankan:
function hitungTotal(harga: number, jumlah: number): number {
return harga * jumlah
}
hitungTotal("5000", "dua")
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.| Manfaat | Penjelasan |
|---|---|
| Bug ketahuan lebih awal | Salah tipe, typo nama properti, lupa menangani null — dicegat saat menulis kode |
| Autocomplete cerdas | Editor tahu persis properti/metode apa yang tersedia pada sebuah nilai |
| Dokumentasi hidup | Tipe menjelaskan bentuk data dan fungsi tanpa perlu komentar panjang |
| Refactor aman | Mengganti nama atau mengubah struktur data? Compiler menunjukkan semua tempat yang ikut rusak |
Bagaimana TypeScript bekerja
Browser dan Node.js tidak mengerti TypeScript. Kode .ts harus diubah dulu menjadi .js oleh compiler bernama tsc. Dalam proses itu, tipe diperiksa lalu dihapus (type erasure).
kode.ts ──(tsc: periksa tipe + hapus tipe)──▶ kode.js ──▶ dijalankan Node / browserPenting dipahami: tipe hanya ada saat menulis kode (compile time). Saat program berjalan, semua tipe sudah hilang. Jadi TypeScript tidak memperlambat program, tapi juga tidak bisa melindungi dari data tak terduga yang datang dari luar (misalnya respons API) — hal ini dibahas di bab 22.
Memasang dan menjalankan
Pasang Node.js (versi 18+), lalu di folder proyek:
npm init -y
npm install --save-dev typescript
npx tsc --init # membuat tsconfig.json
npx tsc # mengompilasi semua .ts menjadi .js
node hello.jsCara cepat tanpa kompilasi manual: npx tsx hello.ts (menjalankan TS langsung), atau coba di typescriptlang.org/play tanpa memasang apa pun.
Sintaks pertama: anotasi tipe
Tipe ditulis setelah titik dua : di belakang nama variabel, parameter, atau sebelum badan fungsi untuk tipe kembalian:
const nama: string = "Sinta"
let umur: number = 21
function sapa(orang: string): string {
return "Halo, " + orang
}Cara latihan di kursus ini
- Editor berisi file
main.ts. Saat menekan Jalankan, kodemu di-type-check dengan compiler TypeScript asli (modestrict), lalu dijalankan dan dicek otomatis. - Jika ada error tipe, pesannya tampil lengkap dengan nomor baris — persis seperti di editor sungguhan.
- Pertama kali menjalankan, browser mengunduh compiler (± 1 MB). Setelah itu cepat.
Kesalahan umum pemula
- Mengira TypeScript adalah bahasa baru yang terpisah dari JavaScript. Bukan — kamu tetap menulis JavaScript, hanya dengan tambahan tipe.
- Mengira tipe tetap ada saat program berjalan. Tipe dihapus saat kompilasi.
- Menambahkan tipe di mana-mana padahal TypeScript sering bisa menebak sendiri (bab 2).