TypeScript adalah JavaScript yang ditambah type: keterangan jenis isi, misalnya "parameter ini berisi angka". Sebelum kode dijalankan, TypeScript mengecek semua keterangan itu dan memprotes kalau ada yang gak cocok, lalu menghapusnya dan menghasilkan JavaScript biasa. Mirip cek ejaan di Google Docs: garis merah muncul waktu kamu masih menulis, tapi garis merahnya gak ikut tercetak di kertas.
🧪 Tebakan cepat: file
.ts-mu masih punya satu error dari TypeScript, tapi tetap kamu compile lalu jalankan. Yang terjadi: gak bisa jalan sama sekali, atau tetap jalan? Tebak dulu, jawabannya ada di bagian "Type hilang waktu kode jalan".
Bug yang lolos di JavaScript
function tambah(a, b) {
return a + b;
}
console.log(tambah("5", 3)); // 53
"5" pakai tanda kutip, jadi isinya teks, bukan angka. Kalau salah satu sisi + berupa teks, JavaScript menyambung keduanya jadi teks: "5" + 3 hasilnya "53", bukan 8. Gak ada pesan error. Hasilnya salah diam-diam, dan baru ketahuan waktu ada orang yang melihat angkanya.
Tambah type, error muncul sebelum jalan
function tambah(a: number, b: number): number {
return a + b;
}
console.log(tambah("5", 3));
a: numberartinya parameteraharus berisi angka. Titik dua lalu nama type seperti ini disebut type annotation.): numbersesudah kurung tutup artinya function ini mengembalikan angka.- Begitu baris terakhir diketik, editor seperti VS Code memberi garis merah di bawah
"5"dengan pesan ini:
Argument of type 'string' is not assignable to parameter of type 'number'. ts(2345)
Artinya: argumen bertipe string (teks) gak bisa dimasukkan ke parameter bertipe number (angka). 2345 adalah nomor error-nya, berguna kalau kamu mau mencarinya di Google. Bug yang tadi lolos sekarang ketahuan sebelum kodenya pernah dijalankan.
Dari .ts jadi .js
Browser dan Node.js cuma mengerti JavaScript, jadi file .ts harus diubah dulu jadi .js. Proses ini disebut compile, dan alatnya bernama tsc (TypeScript compiler). Cara memasangnya di proyek dibahas di materi tsconfig. Untuk sekarang, cukup tahu apa yang dia kerjakan:
$ npx tsc tambah.ts
tambah.ts:5:20 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
5 console.log(tambah("5", 3));
~~~
Found 1 error in tambah.ts:5
5:20 artinya baris 5, kolom 20, dan ~~~ menunjuk bagian yang salah. Editor menulis nomornya ts(2345), terminal menulis TS2345: error-nya sama. Sesudah itu tsc menulis file tambah.js:
"use strict";
function tambah(a, b) {
return a + b;
}
console.log(tambah("5", 3));
Semua : number hilang. Baris "use strict"; ditambahkan tsc untuk menyalakan mode ketat JavaScript, kamu gak perlu memikirkannya sekarang.
Type hilang waktu kode jalan
tsc tetap menulis tambah.js walau ada error. Kalau file itu dijalankan:
$ node tambah.js
53
Itu jawaban tebakannya: kodenya tetap jalan, dan bug-nya ikut jalan. Type cuma dipakai waktu pengecekan, lalu dihapus. JavaScript yang jalan gak tahu apa-apa soal number, jadi gak ada lagi yang mencegah "5" masuk. Aturannya: betulkan semua error sebelum kode dijalankan.
Karena alasan yang sama, TypeScript gak bisa mengecek data yang baru datang waktu kode jalan, misalnya jawaban dari server atau ketikan user.
Latihan di BelajarWeb bekerja seperti tsc lalu menjalankan hasilnya: kode TS-mu diperiksa dulu (mode strict), error-nya ditampilkan di console, lalu type-nya dihapus dan kodenya dijalankan. Yang dinilai adalah isi variabel dan hasil function, kodenya memakai type annotation, dan, di latihan pelajaran ini, gak ada error tipe.
Superset: semua JavaScript diterima
TypeScript disebut superset dari JavaScript: dia mencakup semua JavaScript, lalu menambahkan type di atasnya. Kode JavaScript yang sudah kamu kenal bisa langsung ditulis di file .ts, lalu type-nya ditambah sedikit demi sedikit. Kadang TypeScript memprotes kode lama itu, misalnya meminta type untuk parameter function, karena dia ingin tahu isinya.
Type annotation pertama kamu
let nama: string = "Budi";
let umur: number = 17;
let aktif: boolean = true;
umur = "tujuh belas";
stringuntuk teks, ditulis di dalam tanda kutip:"Budi".numberuntuk angka, tanpa tanda kutip:17, bukan"17".booleanuntuk nilai logika, cumatrueataufalse.- Baris terakhir ditolak dengan
Type 'string' is not assignable to type 'number'. ts(2322). Sekaliumurdiberi typenumber, isinya gak boleh diganti teks.
⚠️ Jebakan yang sering ketemu
- Menganggap TypeScript mengecek waktu jalan. Type dihapus sebelum kode jalan. Data dari server yang bentuknya beda tetap bisa bikin error, jadi data seperti itu tetap perlu dicek di kode.
- Angka ditulis sebagai teks.
let umur: number = "17"ditolak TypeScript. Di latihan, error-nya muncul di console,error TS2322: Type 'string' is not assignable to type 'number'., dan isi"17"juga gak sama dengan17, jadi test-nya gagal. Hapus tanda kutipnya. - Lupa type annotation.
let nama = "Budi"tetap sah di TypeScript (dia bisa menebak type-nya, dibahas di materi berikutnya), tapi latihan ini memeriksa kodemu memakai type annotation. Tulis: string. - Mengabaikan garis merah.
tsctetap menulis file.jswalau ada error. Error yang dibiarkan berarti bug yang ikut jalan.
TL;DR: TypeScript adalah superset JavaScript: JavaScript plus type. Type annotation ditulis dengan titik dua, misalnya let umur: number = 17 atau function tambah(a: number, b: number): number. Sebelum jalan, tsc mengecek type dan memberi error seperti Type 'string' is not assignable to type 'number'. ts(2322), lalu compile ke JavaScript dengan semua type dihapus. File JS-nya tetap ditulis walau ada error, dan waktu jalan gak ada lagi yang mengecek type, jadi betulkan error sebelum jalan. Tiga type pertama: string untuk teks, number untuk angka, boolean untuk true atau false.
