Tipando Props

Receita

Defina contratos de props claros e com segurança de tipo para seus componentes React usando interfaces e aliases de tipo do TypeScript. Cubra props obrigatórias, props opcionais, children e padrões comuns de props.

Exemplo de Trabalho

// Props básicas com campos obrigatórios e opcionais
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>
  );
}

// Tipando 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>
  );
}

// Padrão de 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="Enviar" onClick={() => console.log("clicado")} />
<Card title="Bem-vindo"><p>Olá mundo</p></Card>
<DataList items={["a", "b"]} renderItem={(item) => <span>{item}</span>} />

Análise Profunda

Como Funciona

• Tipos de props atuam como um contrato entre o componente e seus consumidores. O TypeScript garante que cada prop obrigatória seja fornecida e que cada valor corresponda ao tipo esperado.
• React.ReactNode é o tipo mais amplo para children. Ele aceita strings, números, elementos JSX, arrays, fragments, null e undefined.
• React.ReactElement é mais restrito que ReactNode. Use-o quando você especificamente precisa de um elemento JSX (não uma string ou número).
• Valores padrão na desestruturação (por exemplo, variant = "primary") funcionam perfeitamente com props opcionais. O TypeScript infere o tipo mais restrito dentro do corpo da função.
• Tipos literais de união como "primary" | "secondary" oferecem autocompletar e capturam erros de digitação em tempo de compilação.

Variações

Estendendo 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 com injeção de componente:

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 do TypeScript

• Use type para props que usam uniões ou interseções. Use interface quando precisar de extends ou quiser a fusão de declarações.
• React.PropsWithChildren<T> é um atalho que adiciona children?: React.ReactNode ao seu tipo.
• React.ComponentPropsWithRef<"div"> inclui a prop ref; ComponentPropsWithoutRef<"div"> a exclui.

Armadilhas

• Usar React.FC adiciona uma prop children implícita nos tipos mais antigos do React (pré-18). Nos tipos do React 18+, React.FC não inclui mais children implicitamente.
• Tipar children como JSX.Element rejeitará strings, números e arrays. Use React.ReactNode a menos que tenha um motivo específico.
• Espalhar ...rest em um elemento DOM sem filtrar props personalizadas causa avisos do React sobre atributos DOM desconhecidos.
• Esquecer de exportar seu tipo de props torna impossível para os consumidores reutilizá-lo ou estendê-lo.

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 restringe variant a "primary" | "secondary" (não 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>;
}

Relacionado

• Noções Básicas de TypeScript
• Tipando Eventos
• Genéricos
• Uniões Discriminadas