React ve TypeScript ile "Clean Code" Yazma Pratikleri

TypeScript'i sadece any tipinden kaçınmak için bir araç olarak görmek, onun potansiyelini harcamaktır. Kıdemli bir frontend mühendisi olarak, TypeScript'i iş kurallarını (business logic) kod seviyesinde zorlayan katı bir sözleşme aracı olarak kullanmalıyız.

1. "Discriminated Unions" ile Olasılıkları Sınırlandırma

Kompleks arayüzlerde, bileşenlerin alabileceği state'leri (durumları) birbirine karıştırmamak hayati önem taşır.

// ❌ Kötü Kullanım: Birbiriyle çelişen proplara izin verir
interface ButtonProps {
  isLoading?: boolean;
  text?: string;
  icon?: React.ReactNode;
}

// ✅ İyi Kullanım (Discriminated Unions): Güvenli tip tasarımı
type ButtonState =
  | { state: "loading" }
  | { state: "success"; text: string }
  | { state: "error"; errorMsg: string };

type SecureButtonProps = ButtonState & { onClick: () => void };

export function ActionButton(props: SecureButtonProps) {
  if (props.state === "loading") return <Spinner />;
  if (props.state === "error")
    return <span className="text-red-500">{props.errorMsg}</span>;

  return <button onClick={props.onClick}>{props.text}</button>;
}