Typed Props Contratos de Props Tipados

Última atualização: 2026-11-03

Typed Props Contratos de Props Tipados

No TypeScript você usa interface ou type para construir um contrato para as props: nomes errados, props ausentes e tipos incompatíveis são capturados em tempo de compilação, e o editor ganha autocompletar de graça. Anote o parâmetro do componente com uma forma e o custo em tempo de execução fica em zero. O contrato também documenta o componente para o próximo leitor, então a API de um componente fica registrada em um só lugar.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

type User = { id: number; name: string; vip?: boolean }  // ? marks an optional property

type UserCardProps = {
  user: User
  onSelect: (id: number) => void     // callback: annotate both the parameters and the return type
  children?: React.ReactNode         // any renderable content
}

function UserCard({ user, onSelect }: UserCardProps) {
  return <li onClick={() => onSelect(user.id)}>{user.name}</li>
}

// ❌ Compile error: <UserCard user={{ id: 'x' }} />  id should be a number

Retorna：Sem valor de retorno; trata-se de um padrão de codificação, não de uma API chamável.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

A tabela mostra o contrato de props do UserCard; clicar em um usuário dispara o callback onSelect e imprime seu id — em um projeto TypeScript real, um tipo errado falharia em tempo de compilação (demonstração JSX em tempo de execução).

💡 Pontos-chave

🏷️ Mais Dados e Engenharia

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós