Typed React Props dan Component Generics di TypeScript

Definisi

Menulis komponen React dengan tipe props eksplisit (Props) dan generics saat komponen bekerja dengan data apa pun (list, select, table). Tujuannya autocomplete + keamanan tanpa any.

Kapan dipakai

Pakai saat komponen reusable (Table, List, Select) yang tipe datanya ditentukan caller. Tanpa generics, caller kehilangan tipe item di renderRow, onChange, dll.

Cara kerja

Props biasa

tsx

type ButtonProps = {
  variant?: 'primary' | 'ghost';
  children: React.ReactNode;
  onClick?: () => void;
};
function Button({ variant = 'primary', children, onClick }: ButtonProps) {
  return <button className={variant} onClick={onClick}>{children}</button>;
}

Generic component

tsx

function List<T>({ items, render }: { items: T[]; render: (it: T) => React.ReactNode }) {
  return <ul>{items.map((it, i) => <li key={i}>{render(it)}</li>)}</ul>;
}
 
<List items={['a', 'b']} render={(s) => s.toUpperCase()} />; // s: string

Polymorphic (lanjut)

tsx

type Props<C extends keyof JSX.IntrinsicElements> = {
  as?: C;
} & JSX.IntrinsicElements[C];

Struktur alur

Catatan implementasi

• Untuk forwardRef + generic, tipe agak verbose; di React 19 ref jadi prop menyederhanakan.
• React.FC sudah jarang disarankan; cukup function dengan Props.
• Polymorphic component powerful tapi rumit; pastikan benar-benar perlu.
• key wajib di list; jangan gunakan index bila urutannya berubah.

Kesalahan umum

• any di props: kehilangan safety; gunakan union/explicit.
• Generic tidak infer: caller harus <T> eksplisit kalau tidak ada argumen penuntun.
• Lupa children type: React.ReactNode lebih aman dari any.
• Over-polymorphic: terlalu fleksibel jadi sulit dipakai.

Referensi terkait

• TypeScript Utility Types, Type Composition, API Response
• React Server Components: RSC, Client Boundary
• Branded Types dan Nominal Typing