🚀 Capítulo 18: TypeScript com React

🎯 Objetivo da Aula

Ao final desta aula, você entenderá as vantagens de usar o TypeScript junto com o React e saberá como definir tipos para as propriedades (Props) dos seus componentes, evitando erros antes mesmo de rodar o código.

---

🏢 O Cenário Prático (Seu Desafio)

Os computadores imperiais costumam enviar dados com formatos errados para tentar quebrar os sistemas rebeldes! Seu desafio é usar o “Escudo de Força” do TypeScript para blindar o componente de Mira Laser, garantindo que ele só aceite números exatos para as coordenadas!

---

🧠 Fundamentos: A Teoria Traduzida

O React puro usa JavaScript, que não liga muito se você passar um texto onde deveria ser um número. O TypeScript corrige isso adicionando Tipos.

Quando usamos React com TypeScript:

1. Os arquivos mudam de .jsx para .tsx.
2. Nós dizemos exatamente o que cada componente espera receber usando uma interface.

Exemplo de Tipagem de Props:

interface PropsMira {
  alvo: string;      // Obrigatório ser texto
  distancia: number; // Obrigatório ser número
  aliado?: boolean;   // O '?' significa que é opcional
}

---

📖 Exemplo Guiado: Componente Tipado

Vamos ver como ficaria o componente de Mira Laser em TypeScript.

🛠️ Passo a Passo

No arquivo MiraLaser.tsx (simulado):

import React from 'react';
 
// 1. Definimos o que o componente precisa receber
interface MiraProps {
  coordenadaX: number;
  coordenadaY: number;
  nomeAlvo: string;
}
 
// 2. Aplicamos a interface nas props do componente
function MiraLaser({ coordenadaX, coordenadaY, nomeAlvo }: MiraProps) {
  return (
    <div style={{ border: '1px solid red', padding: '10px' }}>
      <h3>🎯 Alvo: {nomeAlvo}</h3>
      <p>Mira travada em: X={coordenadaX}, Y={coordenadaY}</p>
    </div>
  );
}
 
export default MiraLaser;

🕹️ Como Executar e Testar no VS Code

Se você estivesse em um projeto TypeScript e tentasse chamar esse componente assim: <MiraLaser coordenadaX="cento e dez" ... /> O VS Code ficaria com uma linha vermelha embaixo na hora, avisando que “cento e dez” é um texto e não um número! Isso evita que o erro chegue até o usuário.

---

🛠️ Prática Obrigatória 1

Crie uma interface chamada PlanetaProps que exija um nome (string), populacao (number) e um campo opcional perigoso (boolean).

---

🛠️ Prática Obrigatória 2

Como você tiparia o useState de um número em TypeScript se quisesse ser explícito? Dica: const [valor, setValor] = useState<number>(0);

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

interface PlanetaProps {
  nome: string;
  populacao: number;
  perigoso?: boolean;
}

---

← Capitulo Anterior | Proximo Capitulo →