Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang sudah paham JavaScript dasar dan ingin kode lebih aman
• Pemula yang ingin dapat feedback dari editor sebelum bug muncul
• Siapa pun yang serius lanjut ke React tanpa drama error runtime yang bikin pusing

Apa yang akan Anda pelajari

• Tipe TypeScript inti untuk kebutuhan coding harian
• Type inference vs anotasi eksplisit (kapan pakai yang mana)
• Interface, type alias, union, dan properti opsional dalam konteks project nyata

Mengapa topik ini penting

Di project nyata, TypeScript membantu Anda menangkap kesalahan bentuk data lebih cepat, sebelum jadi bug runtime. Ini sangat kerasa saat komponen React mulai banyak, props makin kompleks, dan data API makin beragam.

Singkatnya: TypeScript bukan soal bikin kode lebih ribet. Tujuannya justru bikin kode lebih jelas dan error lebih cepat ketahuan.

Konsep inti

Anotasi tipe

Gunakan anotasi saat Anda butuh kejelasan kontrak, terutama di fungsi.

let username: string = "Dina";
let total: number = 42;

Interface dan type alias

Keduanya dipakai untuk mendefinisikan kontrak data.

interface User {
  id: number;
  name: string;
}

type UserRole = "admin" | "member";

Rule cepat:

• interface cocok untuk bentuk object
• type fleksibel untuk union dan kombinasi tipe

Optional dan union type

Bagian ini paling sering kepake saat handling data UI + API.

type Profile = {
  name: string;
  bio?: string;
  status: "active" | "inactive";
};

Panduan langkah demi langkah

Langkah 1 — Buat file TypeScript

Mulai dari satu file .ts dan satu fungsi bertipe. Jangan overcomplicate.

Langkah 2 — Definisikan kontrak data

Definisikan kontrak untuk object yang sering dipakai (User, Product, ApiResponse).

Langkah 3 — Terapkan pola strict

Hindari any sebagai default. Modelkan kemungkinan nilai pakai union dan properti opsional.

Target bab ini: data invalid jadi susah lolos tanpa sengaja.

Contoh praktis

Contoh 1 — Utility function bertipe

function addTax(price: number, taxRate: number): number {
  return price + price * taxRate;
}

Kenapa ini penting:

• Kontrak fungsi langsung terbaca jelas oleh siapa pun yang maintain kode.

Contoh 2 — Konverter type-safe

function celsiusToFahrenheit(value: number): number {
  return (value * 9) / 5 + 32;
}

Real case:

• Utility function seperti ini sering dipakai ulang di banyak komponen. Typing yang rapi mencegah salah pakai.

Kesalahan umum dan cara menghindarinya

• Terlalu sering pakai any -> mulai dari tipe spesifik, gunakan unknown jika perlu
• Lupa cek properti opsional -> pakai guard condition sebelum akses
• Bikin sistem tipe terlalu rumit sejak awal -> modelkan kebutuhan sekarang dulu
• Terlalu percaya data API mentah -> definisikan response type dan cek asumsi

Mini Project

• Buat konverter satuan type-safe dengan minimal 3 fungsi konversi.
• Bonus: tambahkan union type kategori unit ("temperature" | "distance" | "weight").

Latihan cepat

• Definisikan interface UserProfile
• Ubah satu fungsi JS ke TS dengan tipe parameter dan return
• Tambahkan satu union type untuk status/kategori
• Jelaskan dalam satu kalimat: kapan pakai interface vs type?

Ringkasan utama

• TypeScript bikin bug lebih cepat kelihatan di tahap development
• Tipe adalah kontrak yang memperjelas niat kode
• Kebiasaan TypeScript sejak awal bikin bab React berikutnya jauh lebih mulus

Langkah berikutnya

Lanjut ke [04. Dasar JavaScript dan TypeScript].