React con TypeScript

TypeScript con React transforma los componentes en contratos explícitos: cuando defines la interface de Props, cualquier desarrollador (o tú mismo en 3 meses) sabe exactamente qué datos acepta el componente sin leer el código interno. El editor autocompleta las props disponibles y alerta si pasas un tipo incorrecto o si olvidas una prop requerida. Los hooks infieren tipos automáticamente: useState([]) infiere string[] si le asignas strings después.

Los eventos en React tienen tipos específicos según el elemento HTML: React.ChangeEvent<HTMLInputElement> para onChange de un input, React.FormEvent<HTMLFormElement> para onSubmit de un form, React.MouseEvent<HTMLButtonElement> para onClick de un botón. Esto importa porque el tipo de e.target y e.currentTarget cambia según el elemento. Un patrón importante: evita anotar componentes como React.FC<Props> porque tiene comportamientos inesperados; define la función directamente con el tipo de Props en los parámetros.

// Componente tipado — no uses FC<>, define Props separado
interface BotoNProps {
  texto: string;
  onClick: () => void;
  variante?: "primario" | "secundario" | "peligro";
  disabled?: boolean;
  children?: React.ReactNode;
}

function Boton({ texto, onClick, variante = "primario", disabled }: BotoNProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variante}`}
    >
      {texto}
    </button>
  );
}

// useState con tipo genérico
const [usuario, setUsuario] = useState<Usuario | null>(null);
const [items, setItems] = useState<string[]>([]);

// useRef tipado
const inputRef = useRef<HTMLInputElement>(null);
const handleFocus = () => inputRef.current?.focus();

// Eventos tipados por elemento HTML
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const data = new FormData(e.currentTarget);
};
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.currentTarget.blur();
};

// ComponentPropsWithRef — extender HTML elements
interface InputProps extends React.ComponentPropsWithRef<"input"> {
  label: string;
  error?: string;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, error, ...props }, ref) => (
    <div>
      <label>{label}</label>
      <input ref={ref} {...props} />
      {error && <span>{error}</span>}
    </div>
  )
);