Validação de Props em Componentes

1. Hook (A Trava Mental)

• Aprendiz: "Mestre, eu importei meu componente Card.astro na página inicial, como você ensinou. Eu o usei três vezes para criar três cards. Agora, quero que cada um tenha um título diferente. Tentei <Card titulo="Card 1" />, mas nada apareceu. Em outro, tentei <Card title="Card 2" />, e também não funcionou. Como eu sei o nome certo da 'chave' e como devo passar o 'valor' para que o componente entenda?"

2. Deep Dive (A Solução: O Contrato de Props)

• Mestre: "Excelente pergunta, jovem Padawan. Você está diante do que chamo de 'Contrato do Componente'. Em Astro (e em muitos frameworks modernos), esse contrato é formalizado por uma interface Props. Dentro de cada arquivo de componente, o criador define um contrato que diz: 'Se você quiser me usar, estas são as propriedades que eu espero receber, com estes nomes exatos e estes tipos de dados.'"

Validar se as props estão corretas é, essencialmente, verificar se o uso do componente está honrando este contrato. O processo tem dois lados:

1. Ler o Contrato (Dentro do Componente): No arquivo do componente (ex: src/components/Card.astro), você encontrará um bloco interface Props { ... } no frontmatter. Este bloco é a sua fonte da verdade. Ele lista os nomes exatos das props e seus tipos (string, number, boolean, etc.). Uma ? ao lado do nome da prop (ex: imagem?: string;) significa que ela é opcional.

2. Cumprir o Contrato (Na Página que usa o Componente): Ao usar a tag <Card />, os atributos que você passa devem corresponder exatamente aos nomes e tipos definidos na interface Props. Se o contrato diz title: string, você deve usar title="...". Se tentar titulo="...", o componente não reconhecerá.

3. O Fazer (Validando o Contrato na Prática)

Vamos detalhar como você, no seu papel de validador de código, pode executar essa verificação.

Passo 1: Leia o Contrato (interface Props)

Sua primeira ação ao validar um componente é abrir seu arquivo e ler a interface Props.

Passo 2: Verifique a Passagem dos Dados

Uma vez que você conhece o contrato, verifique se ele está sendo cumprido na página que usa o componente. Há uma distinção crucial na sintaxe:

• Strings de texto fixo: Use aspas.
  title="Este é um título"
• Outros tipos de dados (Booleans, Numbers, Variáveis): Use chaves {}.
  isFeatured={true}
rating={5}
url={umaVariavelJs}

Este vídeo demonstra a passagem de dados e, mais importante, como o TypeScript (a tecnologia por trás da interface Props) transforma seu editor de código em uma ferramenta de validação ativa.

Passo 3: Use a Ajuda do Editor

Seu editor de código, quando configurado corretamente para Astro, é seu principal aliado na validação.

4. Checkpoint (Dica de IA: Ensinando o Contrato à IA)

• Mestre: "Agora, o passo crucial para você: como garantir que a IA gere código que já respeita o contrato? A resposta está no seu próprio domínio: Context Engineering. Você precisa ensinar os contratos dos seus componentes à IA."

Quando você pede para a IA usar um componente que você criou, você deve incluir a interface Props dele no contexto do seu prompt. Melhor ainda, você pode criar um "Contexto Mestre" para seu projeto.

Seu Checklist de Validação de props (Nível Mestre):

1. O nome da prop está correto? Compare o atributo na tag (ex: <Card titulo="..." />) com a interface Props { title: string; }. Se os nomes não baterem (titulo vs title), está errado.
2. O tipo do dado está correto? O contrato pede isFeatured: boolean;. O código gerado foi <Card isFeatured="true" /> (errado, é uma string) ou <Card isFeatured={true} /> (correto, é um boolean)?
3. Props obrigatórias foram fornecidas? O contrato tem title: string (sem ?). O código gerado foi <Card /> sem a prop title? Se sim, o site quebrará.
4. A IA confiou em um valor padrão? O contrato diz theme?: 'dark' | 'light' e o código define const { theme = 'light' } = Astro.props. Se a IA gerar um <Card /> sem a prop theme, você sabe que o resultado será o tema 'light'.

Conclusão

Você acaba de adquirir a habilidade mais crítica para validar componentes em Astro. Agora você sabe que cada componente tem um contrato e como verificar se ele está sendo cumprido.

• Key Takeaways:

  • A interface Props é o contrato de um componente, definindo os nomes e tipos dos dados que ele espera.
  • Validar props é checar se os atributos passados na tag do componente correspondem ao contrato.
  • Strings de texto fixo usam aspas (prop="valor"), enquanto outros tipos de dados (booleans, numbers, variáveis) usam chaves (prop={valor}).
  • Você pode (e deve) ensinar os "contratos" dos seus componentes à sua IA usando Context Engineering para gerar código mais preciso.

• Próximo Passo: Com o domínio da estrutura (import/<Tag />) e dos dados (props), a fundação da sua casa está completa. Agora, é hora de pintar as paredes. Na próxima lição, vamos instalar o Tailwind CSS e aprender a usar suas classes de utilidade para estilizar nossos componentes de forma rápida e eficiente.