Script Setup com TypeScript

A sintaxe <script setup> é uma das adições mais significativas no Vue 3, proporcionando uma maneira mais concisa e declarativa de escrever componentes com a Composition API. Quando usada com TypeScript, essa sintaxe não apenas simplifica o código, mas também melhora a integração com recursos de tipo, proporcionando uma experiência de desenvolvimento aprimorada.

Benefícios do <script setup>

1. Menos Boilerplate: Reduz significativamente a quantidade de código necessária para definir um componente.
2. Melhor Suporte para TypeScript: Oferece integração direta com TypeScript, permitindo inferência de tipo completa e outras funcionalidades do editor como autocompletação e refatoração.
3. Integração Direta com Composition API: Projetada para ser usada com a Composition API, facilita a organização do código relacionado à lógica de componentes.

Sintaxe com TypeScript

Para usar TypeScript com a sintaxe <script setup>, você precisa definir o componente diretamente usando a tag <script setup lang="ts">. Isso indica ao Vue e ao compilador que o conteúdo do script deve ser tratado como TypeScript.

Exemplo Básico com TypeScript:

Aqui está um exemplo de um componente Vue simples usando <script setup> com TypeScript:

<script setup lang="ts">
import { ref, onMounted } from "vue";

const count = ref<number>(0);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log("Componente montado!");
});
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Explicação:

• ref<number>(0): Define uma referência reativa com TypeScript, especificando que count é do tipo number.
• increment: Uma função simples para incrementar o count.
• onMounted: Um hook de ciclo de vida usado para executar um efeito quando o componente é montado.

Usando em Componentes com TypeScript

Quando você precisa interagir com outros componentes ou bibliotecas externas, pode definir props, emitir eventos ou declarar componentes dentro do <script setup>.

Exemplo com Props e Eventos:

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";

const props = defineProps<{
  initialCount: number;
}>();

const emits = defineEmits<{
  (event: "update:count", count: number): void;
}>();

const count = ref(props.initialCount);

function increment() {
  count.value++;
  emits("update:count", count.value);
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Explicação:

• defineProps e defineEmits: Funções utilitárias para declarar props e eventos com suporte de tipos. Aqui, initialCount é uma prop de entrada e um evento update:count é emitido quando o contador é incrementado.
• ref: Continua a ser usado para reatividade, com o valor inicial sendo definido a partir de props.

Melhores Práticas

1. Organização do Código: Mantenha funções e reatividade agrupadas por funcionalidade ao invés de espalhadas pelo componente.
2. Uso de Composables: Para lógica reutilizável, prefira usar composables que podem ser importados e usados em diferentes componentes.
3. Tipagem Forte: Aproveite ao máximo o TypeScript para evitar erros em tempo de desenvolvimento e melhorar a manutenibilidade.

A sintaxe <script setup> em conjunto com TypeScript oferece uma maneira poderosa e eficiente de desenvolver componentes Vue, aproveitando os benefícios da Composition API e melhorando a experiência de desenvolvimento com tipos seguros e menos código.