Configuração

O suporte do Nuxt TypeScript vem principalmente através de um módulo Nuxt, @nuxt/typescript-build, e seus tipos @nuxt/types.

Aqui estão as orientações para instalar e configurá-lo.

Instalação

yarn add --dev @nuxt/typescript-build @nuxt/types

npm install --save-dev @nuxt/typescript-build @nuxt/types

Versão de tipos

Você pode querer instalar uma versão específica de tipos que corresponde com sua versão do Nuxt se não for a mais recente:

yarn add --dev @nuxt/types@2.13.2
# OU
npm install --save-dev @nuxt/types@2.13.2

yarn add --dev @nuxt/types@npm:@nuxt/types-edge
# OU
npm install --save-dev @nuxt/types@npm:@nuxt/types-edge

O versionamento dos tipos corresponde ao versionamento do Nuxt desde 2.13.0.

Configuração

Tudo o que você precisa é adicionar @nuxt/typescript-build ao seu buildModules no arquivo nuxt.config.ts

nuxt.config.ts

import type { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  buildModules: ['@nuxt/typescript-build']
}

export default config

e criar um arquivo tsconfig.json :

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@nuxt/typescript-build",
      "@types/node"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Note que o target ES2018 é necessário para que seja possível o uso de Encadeamento Opcional e Coalescência Nula, já que o target ESNext parece não suportar essas funcionalidades por agora.

Você também vai precisar fornecer tipos para arquivos Vue adicionando a seguinte declaração de tipos:

vue-shim.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

Você pode colocar esse arquivo na pasta raiz do seu projeto ou em uma pasta chamada types. Você pode colocá-lo em uma pasta customizada, mas você vai precisar configurar typeRoots no arquivo tsconfig.json.

Verifique a documentação oficial do TypeScript para saber mais sobre as diferentes opções do compilador.

Se você está usando o Nuxt programaticamente com um framework de servidor customizado, note que vai precisar ter certeza que você esperou o Nuxt estar pronto antes de começar o build:

// Tenha certeza que esperou o Nuxt carregar o @nuxt/typescript-build antes de continuar
await nuxt.ready()
...
if (config.dev) {
  const builder = new Builder(nuxt)
  await builder.build()
}

É isso, você está pronto para usar o TypeScript em seus layouts, componentes, plugins e middlewares.

Você pode verificar a seção CookBook para obter dicas de uso do TypeScript em seu projeto Nuxt.

Opções do módulo

typeCheck

Ativa a checagem de tipos do TypeScript em um processo separado.

Tipo: Boolean ou Object
Valor padrão: true

Quando ativado, o Nuxt.js usa fork-ts-checker-webpack-plugin para fornecer a verificação de tipo.

Você pode usar um Object para substituir as opções do plugin ou configurá-lo para false para que ele seja desativado.

ignoreNotFoundWarnings

Oculta avisos do TypeScript de não encontrado.

Tipo: Boolean
Valor padrão: false

Quando atividado, você pode ocultar avisos como export ... was not found ....

Veja também as informações de fundo aqui.

Aviso: Essa propriedade pode ocultar os avisos que você deseja ver. Tenha cuidado com a forma como você a configura.

loaders

Customização das opções do ts-loader

Tipo: Object

Se você precisar de personalização extra do TypeScript loader, você pode personalizá-lo para ambos os arquivos ts & tsx através de opções de módulo loaders.ts & loaders.tsx:

nuxt.config.ts

import type { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  typescript: {
    loaders: {
      ts: {
        silent: true
      },
      tsx: {
        silent: true
      }
    }
  }
}

export default config