React bileşenlerini TypeScript ile nasıl tiplersiniz? children, native HTML props ve generic bileşen örnekleri verin.

Props için bir type/interface tanımlanır; native elemanı saran bileşenlerde `ComponentProps<'button'>` gibi yardımcılarla tüm HTML özellikleri devralınır.

import type { ComponentProps, ReactNode } from "react";

// 1. children
type CardProps = { title: string; children: ReactNode };
function Card({ title, children }: CardProps) {
  return <section><h2>{title}</h2>{children}</section>;
}

// 2. Native props'u genişletmek
type ButtonProps = ComponentProps<"button"> & { variant?: "primary" | "ghost" };
function Button({ variant = "primary", className, ...rest }: ButtonProps) {
  return <button className={`btn btn-${variant} ${className ?? ""}`} {...rest} />;
}
// <Button type="submit" disabled onClick={...} /> hepsi tip güvenli

// 3. Generic bileşen
type ListProps<T> = {
  items: T[];
  getKey: (item: T) => string;
  renderItem: (item: T) => ReactNode;
};
function List<T>({ items, getKey, renderItem }: ListProps<T>) {
  return <ul>{items.map((i) => <li key={getKey(i)}>{renderItem(i)}</li>)}</ul>;
}
// <List items={users} getKey={(u) => u.id} renderItem={(u) => u.name} />  -> T = User

Diğer sık ihtiyaçlar

• Event tipleri: (e: React.ChangeEvent<HTMLInputElement>) => void, React.FormEvent<HTMLFormElement>.
• useState<User | null>(null) ile başlangıçta null olan state.
• useRef<HTMLInputElement>(null) DOM ref'i için.
• React 19'da ref normal bir prop'tur; ComponentProps<"input"> zaten ref'i içerir, forwardRef'e gerek kalmaz.
• React.FC kullanmak zorunlu değildir; birçok ekip düz fonksiyon + props tipi tercih eder.