Tipado de Props

Receta

Define contratos de prop claros y seguros para tus componentes React usando interfaces y alias de tipo de TypeScript. Cubre props requeridas, props opcionales, children, y patrones de props comunes.

Ejemplo Funcional

// Props básicos con campos requeridos y opcionales
type ButtonProps = {
  label: string;
  variant?: "primary" | "secondary" | "danger";
  disabled?: boolean;
  onClick: () => void;
};
 
export function Button({ label, variant = "primary", disabled = false, onClick }: ButtonProps) {
  return (
    <button className={`btn btn-${variant}`} disabled={disabled} onClick={onClick}>
      {label}
    </button>
  );
}

// Tipado de children
type CardProps = {
  title: string;
  children: React.ReactNode;
};
 
export function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Patrón render prop
type DataListProps<T> = {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
};
 
export function DataList<T>({ items, renderItem }: DataListProps<T>) {
  return <ul>{items.map((item, i) => <li key={i}>{renderItem(item, i)}</li>)}</ul>;
}

// Uso
<Button label="Submit" onClick={() => console.log("clicked")} />
<Card title="Welcome"><p>Hello world</p></Card>
<DataList items={["a", "b"]} renderItem={(item) => <span>{item}</span>} />

Buceo Profundo

Cómo Funciona

• Los tipos de props actúan como un contrato entre el componente y sus consumidores. TypeScript fuerza que cada prop requerido sea suministrado y cada valor coincida con el tipo esperado.
• React.ReactNode es el tipo children más amplio. Acepta strings, números, elementos JSX, arrays, fragmentos, null, y undefined.
• React.ReactElement es más estrecho que ReactNode. Úsalo cuando específicamente necesites un elemento JSX (no un string o número).
• Los valores por defecto en la desestructuración (por ejemplo, variant = "primary") funcionan perfectamente con props opcionales. TypeScript infiere el tipo estrechado dentro del cuerpo de la función.
• Los tipos literales de unión como "primary" | "secondary" te dan autocompletado y atrapan typos en tiempo de compilación.

Variaciones

Extendiendo props de elementos HTML:

type InputProps = React.ComponentPropsWithoutRef<"input"> & {
  label: string;
  error?: string;
};
 
export function Input({ label, error, ...rest }: InputProps) {
  return (
    <div>
      <label>{label}</label>
      <input {...rest} />
      {error && <span className="error">{error}</span>}
    </div>
  );
}

Props con inyección de componentes:

type LayoutProps = {
  as?: React.ElementType;
  children: React.ReactNode;
  className?: string;
};
 
export function Layout({ as: Component = "div", children, className }: LayoutProps) {
  return <Component className={className}>{children}</Component>;
}

Notas de TypeScript

• Usa type para props que usan uniones o intersecciones. Usa interface cuando necesites extends o quieras declaration merging.
• React.PropsWithChildren<T> es una abreviatura que añade children?: React.ReactNode a tu tipo.
• React.ComponentPropsWithRef<"div"> incluye el prop ref; ComponentPropsWithoutRef<"div"> lo excluye.

Trampas

• Usar React.FC añade un prop children implícito en tipos de React antiguos (pre-18). En tipos de React 18+, React.FC ya no incluye children implícitamente.
• Tipear children como JSX.Element rechazará strings, números, y arrays. Usa React.ReactNode a menos que tengas una razón específica.
• Extender ...rest a un elemento DOM sin filtrar props personalizados causa advertencias de React sobre atributos DOM desconocidos.
• Olvidar exportar tu tipo de props hace imposible que los consumidores lo reutilicen o lo extiendan.

Alternativas

FAQs

type InputProps = React.ComponentPropsWithoutRef<"input"> & {
  label: string;
  error?: string;
};
 
function Input({ label, error, ...rest }: InputProps) {
  return (
    <div>
      <label>{label}</label>
      <input {...rest} />
      {error && <span>{error}</span>}
    </div>
  );
}

type ButtonProps = {
  variant?: "primary" | "secondary";
};
 
function Button({ variant = "primary" }: ButtonProps) {
  // TypeScript estrecha variant a "primary" | "secondary" (no undefined)
}

type DataListProps<T> = {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
};

type LayoutProps = {
  as?: React.ElementType;
  children: React.ReactNode;
};
 
function Layout({ as: Component = "div", children }: LayoutProps) {
  return <Component>{children}</Component>;
}

Relacionados

• TypeScript Basics
• Typing Events
• Generics
• Discriminated Unions