1. Mengapa Industri Beralih ke TypeScript?
JavaScript bersifat dinamis: kesalahan salah ketik nama properti (typo) atau salah kirim tipe data baru akan meledak saat aplikasi sudah dipakai pengguna di production. TypeScript menangkap 99% kesalahan ini secara instan di editor saat kamu sedang mengetik kode.
Mendefinisikan Type dan Interface
typescript
| 1 | // 1. Type Alias untuk Primitive / Union |
| 2 | type Role = "ADMIN" | "EDITOR" | "STUDENT"; |
| 3 | |
| 4 | // 2. Interface untuk Struktur Objek |
| 5 | interface UserProfile { |
| 6 | readonly id: string; // Tidak bisa diubah setelah dibuat |
| 7 | name: string; |
| 8 | email: string; |
| 9 | age?: number; // Optional (boleh diisi atau tidak) |
| 10 | role: Role; |
| 11 | } |
| 12 | |
| 13 | const student: UserProfile = { |
| 14 | id: "usr_1", |
| 15 | name: "Ahmad", |
| 16 | email: "ahmad@kulodev.id", |
| 17 | role: "STUDENT" |
| 18 | }; |
2. Type Narrowing (Penyempitan Tipe)
Jika suatu parameter bisa berupa beberapa tipe (Union, misal `string | number`), TypeScript akan memaksa kita melakukan pemeriksaan kondisi (type narrowing) sebelum memanggil metode spesifik.
Narrowing dengan typeof & in operator
typescript
| 1 | function formatSaldo(nominal: number | string) { |
| 2 | if (typeof nominal === "number") { |
| 3 | return `Rp ${nominal.toLocaleString("id-ID")}`; |
| 4 | } else { |
| 5 | return `Rp ${nominal.trim()}`; |
| 6 | } |
| 7 | } |
Kuis Pemahaman
+10 XP
Apa fungsi dari tanda tanya `?` pada properti interface, seperti `age?: number`?