reactpropsfrontendMahir4 mnt baca

TypeScript untuk React

Props, state, event handler, dan ref yang bertipe penuh di komponen React.

Props dengan Interface

Setiap komponen mendefinisikan kontrak props-nya:

tsx

interface TombolProps {
  label: string;
  varian?: "primer" | "sekunder";
  onKlik: () => void;
}

function Tombol({ label, varian = "primer", onKlik }: TombolProps) {
  return <button onClick={onKlik} className={varian}>{label}</button>;
}

// pemakaian:
<Tombol label="Simpan" onKlik={() => simpan()} />        // ok
<Tombol label="Simpan" />                                 // Error: onKlik wajib
<Tombol label="Simpan" onKlik={() => {}} varian="besar" /> // Error: "besar" bukan varian

Typo nama prop atau prop wajib yang lupa dikirim ketahuan saat kompilasi, bukan sebagai komponen yang render-nya rusak diam-diam.

State Bertipe

tsx

const [nama, setNama] = useState("");           // string, ter-infer otomatis
const [umur, setUmur] = useState<number | null>(null); // butuh annotation eksplisit
const [pengguna, setPengguna] = useState<Pengguna | null>(null);

useState("") ter-infer sebagai string. Tapi useState(null) butuh generic eksplisit, kalau tidak tipenya terkunci null selamanya dan setPengguna(obj) error.

Event Handler

tsx

function Form() {
  const handleUbah = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value); // string, aman
  };

  const handleKirim = (e: React.FormEvent) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={handleKirim}>
      <input onChange={handleUbah} />
    </form>
  );
}

Tipe event React (ChangeEvent, FormEvent, MouseEvent) memberi tahu bentuk e.target secara presisi. Salah ketik e.target.valu langsung error.

Ref Bertipe

tsx

const inputRef = useRef<HTMLInputElement>(null);

function fokus() {
  inputRef.current?.focus(); // ?. karena current bisa null
}

Generic useRef<HTMLInputElement> memastikan current punya method DOM yang benar. Optional chaining wajib karena ref awalnya null.

Catatan teknis: Hindari React.FC untuk komponen baru kecuali butuh sesuatu yang spesifik darinya. React.FC otomatis menambahkan prop children (sering tidak diinginkan) dan perilakunya berubah antar versi @types/react. Destructuring props dengan interface biasa seperti contoh di atas lebih eksplisit dan bebas kejutan.