TypeScript

Nuxt é totalmente tipado e fornece atalhos úteis para garantir que você tenha acesso a informações de tipo precisas ao codificar.

Verificação de Tipos

Por padrão, o Nuxt não verifica tipos quando você executa nuxt dev ou nuxt build, por razões de desempenho.

Para habilitar a verificação de tipos no momento da construção ou desenvolvimento, instale vue-tsc e typescript como dependências de desenvolvimento:

npm install --save-dev vue-tsc typescript

Em seguida, execute o comando nuxt typecheck para verificar seus tipos:

Terminal

npx nuxt typecheck

Para habilitar a verificação de tipos no momento da construção ou desenvolvimento, você também pode usar a opção typescript.typeCheck no seu arquivo nuxt.config:

nuxt.config.ts

export default defineNuxtConfig({
  typescript: {
    typeCheck: true
  }
})

Tipos Gerados Automaticamente

Quando você executa nuxt dev ou nuxt build, o Nuxt gera os seguintes arquivos para suporte de tipo no IDE (e verificação de tipos):

`.nuxt/nuxt.d.ts`

Este arquivo contém os tipos de quaisquer módulos que você esteja usando, bem como os tipos principais que o Nuxt requer. Seu IDE deve reconhecer esses tipos automaticamente.

Algumas das referências no arquivo são para arquivos que são gerados apenas dentro do seu buildDir (.nuxt) e, portanto, para obter tipagens completas, você precisará executar nuxt dev ou nuxt build.

`.nuxt/tsconfig.json`

Este arquivo contém a configuração básica recomendada do TypeScript para o seu projeto, incluindo aliases resolvidos injetados pelo Nuxt ou módulos que você está usando, para que você possa obter suporte completo de tipo e auto-completar de caminho para aliases como ~/file ou #build/file.

Considere usar a seção imports do nuxt.config para incluir diretórios além dos padrões. Isso pode ser útil para auto-importar tipos que você está usando em todo o seu aplicativo.

Assista a um vídeo de Daniel Roe explicando os aliases embutidos do Nuxt.

Nitro também gera tipos automaticamente para rotas de API. Além disso, o Nuxt também gera tipos para componentes disponíveis globalmente e auto-importações dos seus composables, além de outras funcionalidades principais.

Lembre-se de que todas as opções estendidas de ./.nuxt/tsconfig.json serão sobrescritas pelas opções definidas no seu tsconfig.json. Sobrescrever opções como "compilerOptions.paths" com sua própria configuração fará com que o TypeScript não leve em consideração as resoluções de módulo de ./.nuxt/tsconfig.json. Isso pode levar a resoluções de módulo como #imports não serem reconhecidas. :br :br Caso você precise estender ainda mais as opções fornecidas por ./.nuxt/tsconfig.json, você pode usar a propriedade alias dentro do seu nuxt.config. O Nuxt as captará e estenderá ./.nuxt/tsconfig.json de acordo.

Verificações Estritas

O TypeScript vem com certas verificações para lhe dar mais segurança e análise do seu programa.

Verificações estritas são habilitadas por padrão no Nuxt para lhe dar maior segurança de tipo.

Se você estiver atualmente convertendo seu código para TypeScript, pode querer desabilitar temporariamente as verificações estritas definindo strict como false no seu nuxt.config:

nuxt.config.ts

export default defineNuxtConfig({
  typescript: {
    strict: false
  }
})

※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.

A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/guide/concepts/typescript