Bab 12: TypeScript di React

Menambahkan *type safety* untuk kode yang lebih kuat dan mudah dikelola.

Apa itu TypeScript?

TypeScript adalah *superset* dari JavaScript yang menambahkan sistem tipe statis. Anggap saja ini adalah JavaScript dengan pengaman tambahan. Sebelum kode Anda dijalankan, TypeScript akan memeriksa apakah Anda menggunakan tipe data yang benar, sehingga banyak *bug* dapat ditemukan pada tahap pengembangan, bukan saat aplikasi sudah berjalan.

Menggunakan TypeScript di React membantu kita mendefinisikan dengan jelas tipe data apa yang diharapkan oleh *props* dan *state* sebuah komponen.

Manfaat Utama

🔍 Menemukan Bug Lebih Awal

TypeScript akan memberitahu Anda jika Anda salah mengirim tipe prop, misalnya mengirim angka padahal yang diharapkan adalah string.

💡 Autocomplete Lebih Baik

Editor kode Anda (seperti VS Code) akan tahu persis properti apa saja yang tersedia di sebuah objek, memberikan saran yang lebih cerdas.

📖 Kode Lebih Mudah Dibaca

Dengan melihat definisi tipe, pengembang lain (atau Anda di masa depan) bisa langsung mengerti data seperti apa yang digunakan oleh sebuah komponen.

Contoh: Menambahkan Tipe pada Komponen

Mari kita lihat bagaimana kita bisa mengubah komponen `UserCard` dari Bab 3 menjadi komponen TypeScript.

1. Versi JavaScript (Sebelumnya)

Tanpa TypeScript, kita tidak tahu pasti tipe data apa yang ada di dalam `user` kecuali kita melihat datanya langsung.

function UserCard({ user }) {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.job}</p>
    </div>
  );
}

2. Versi TypeScript (`.tsx`)

Dengan TypeScript, kita membuat sebuah `interface` atau `type` untuk mendefinisikan bentuk dari prop `user`. Jika kita mencoba mengirim prop yang tidak sesuai, TypeScript akan memberikan error.

// 1. Definisikan "bentuk" data untuk props
interface User {
  id: number;
  name: string;
  job: string;
  avatar: string;
}

interface UserCardProps {
  user: User;
}

// 2. Gunakan tipe tersebut pada komponen
// File ini sekarang akan berekstensi .tsx
function UserCard({ user }: UserCardProps) {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.job}</p>
    </div>
  );
}