0Pricing
Vue Academy · Aula

Configuração do TypeScript em projetos Vue

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' em SFCs e suporte do TypeScript na IDE.

Configuração do TypeScript em projetos Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

TypeScript no Vue 3

O Vue 3 foi reescrito em TypeScript, por isso oferece excelente suporte a tipos. Um projeto bem configurado detecta erros no momento da compilação e oferece um ótimo preenchimento automático do editor em arquivos .vue.

Estrutura inicial com TS

A forma mais fácil de começar é create-vue, que pergunta se você deseja adicionar TypeScript e configura tsconfig.json, vue-tsc e as ferramentas adequadas.

npm create vue@latest
# select "Add TypeScript? Yes"

Fundamentos de tsconfig.json

O tsconfig.json controla a compilação. A configuração mais importante para detectar erros é o modo estrito.

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext"
  }
}

Por que o modo estrito é importante

strict: true habilita strictNullChecks, noImplicitAny e muito mais. Ele obriga você a tratar null/undefined e impede que valores sem tipo passem despercebidos.

Aliases de caminhos

O alias @/ aponta para a pasta src, para que as importações permaneçam limpas, independentemente da profundidade do arquivo. Configure-o tanto em tsconfig.json quanto no seu empacotador.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Usando o alias

Agora as importações fazem referência a módulos a partir da raiz do projeto, em vez de usarem cadeias relativas ../../.

import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'

TypeScript em SFCs

Para usar TypeScript dentro de um Componente de Arquivo Único, adicione lang="ts" à tag de script. Com <script setup>, isso habilita macros tipadas.

<script setup lang="ts">
const count: number = 0
</script>

Verificando tipos em SFCs

O compilador tsc comum não entende arquivos .vue. O Vue fornece o vue-tsc, um adaptador que verifica os tipos dos modelos e dos scripts em conjunto.

vue-tsc --noEmit

Adicionando um script de verificação

Adicione um script a package.json para que a integração contínua e você possam verificar os tipos com um único comando.

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Suporte no editor com Volar

A extensão Volar (Vue - Oficial) para VS Code fornece recursos inteligentes de TypeScript dentro de arquivos .vue: autocompletar, ir para a definição e erros de tipos nos modelos. Desative o Vetur antigo para evitar conflitos.

Modo de controle total

O Volar pode ser executado no Modo de controle total, substituindo a extensão TS integrada para lidar com arquivos .ts e .vue. Isso melhora o desempenho e a consistência em projetos grandes.

Verificação rápida

Teste seus conhecimentos sobre a configuração do TypeScript.

Recapitulação

Você configurou o TypeScript no Vue:

  • Habilite o modo estrito em tsconfig.json para obter as verificações mais rigorosas.
  • Configure o alias de caminho @/* para src.
  • Adicione lang="ts" aos scripts SFC.
  • Verifique os tipos com vue-tsc --noEmit e use a extensão Volar no VS Code.

Perguntas Frequentes

A aula “Configuração do TypeScript em projetos Vue” é grátis?

Sim — o texto completo de “Configuração do TypeScript em projetos Vue” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Configuração do TypeScript em projetos Vue”?

vite.config.ts, tsconfig.json, vue-tsc, lang='ts' em SFCs e suporte do TypeScript na IDE. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Configuração do TypeScript em projetos Vue”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do TypeScript em projetos Vue
  2. Props e emits tipados com defineProps/defineEmits
  3. Tipagem de composables e refs
  4. Componentes Vue genéricos
← Voltar para Vue Academy