🚀 Capítulo 19: TypeScript com Vue

🎯 Objetivo da Aula

Ao final desta aula, você entenderá as vantagens de usar o TypeScript junto com o Vue 3 e saberá como definir tipos para as propriedades (Props) e para os estados (ref), 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 a “Blindagem de Beskar” do TypeScript para proteger o componente de Mira Laser, garantindo que ele só aceite números exatos para as coordenadas!

---

🧠 Fundamentos: A Teoria Traduzida

O Vue 3 foi totalmente escrito em TypeScript, o que significa que o suporte a ele é perfeito!

Quando usamos Vue com TypeScript:

1. Os arquivos mudam de .vue para .vue (continuam iguais!), mas dentro do script usamos <script setup lang="ts">.
2. Podemos usar tipos do TypeScript para travar o que o componente recebe.

1. Tipando Props (O Jeito Vue 3)

Usamos a tipagem baseada em tipos do TypeScript direto no defineProps:

<script setup lang="ts">
// Definimos o formato das props usando tipos do TS
defineProps<{
  alvo: string;
  distancia: number;
  aliado?: boolean; // Opcional
}>();
</script>

2. Tipando ref()

O Vue geralmente adivinha o tipo (se você colocar ref(0), ele sabe que é número). Mas você pode ser explícito:

const velocidade = ref<number>(0);

---

📖 Exemplo Guiado: Mira Laser Tipada

Vamos ver o componente tipado.

🛠️ Passo a Passo

No arquivo src/components/MiraLaser.vue:

<template>
  <div style="border: 1px solid red; padding: 10px;">
    <h3>🎯 Alvo: {{ nomeAlvo }}</h3>
    <p>Mira travada em: X={{ coordenadaX }}, Y={{ coordenadaY }}</p>
  </div>
</template>
 
<script setup lang="ts">
// Definimos os tipos das props
defineProps<{
  coordenadaX: number;
  coordenadaY: number;
  nomeAlvo: string;
}>();
</script>

🕹️ 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!

---

🛠️ Prática Obrigatória 1

Crie uma interface chamada PlanetaProps que exija um nome (string) e um id (number). Como ficaria o defineProps usando essa interface?

---

🛠️ Prática Obrigatória 2

Como você tiparia um ref que pode começar como null mas depois guardará um objeto do tipo User? Dica: const user = ref<User | null>(null);

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

interface PlanetaProps {
  nome: string;
  id: number;
}
 
defineProps<PlanetaProps>();

---

← Capitulo Anterior | Proximo Capitulo →