Preparación

El soporte de Typescript en Nuxt viene principalmente mediante un módulo de Nuxt, @nuxt/typescript-build.

Aqui están las guias para instalar y configurarlo.

Instalación

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

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

Types version Si usted quiere instalar versiones especifica de los types para coincidir con tu version de Nuxt que no es la más reciente :

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

Si usted usa nuxt-edge :

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

El versionamiento de los types coincide con el versionamiento de Nuxt desde la version 2.13.0.

Configuración

Todo lo que necesitas es agregar @nuxt/typescript-build a tus buildModules en nuxt.config.ts

nuxt.config.ts

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

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

export default config

y crear un archivo 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"
  ]
}

Notese que el target ES2018 es necesario para usar el Optional Chaining y Nullish Coalescing, porque el target ESNext parece no soportar estas funciones actualmente.

Usted tambien debe proveer los types para los archivos de Vue añadiendo la siguiente declaracion de types:

vue-shim.d.ts

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

Usted puede poner este archivo en el directorio raiz de tu proyecto o en una carpeta llamada types. Usted tambien puede poner en un directorio personalizado, pero va tener que configurar el typeRoots en el archivo tsconfig.json.

Revisar la documentación oficial de TypeScript para aprender acerca de las diferentes opciones del compilador.

Si usted esta usando Nuxt de forma personalizada con un framework de servidor personalizado, notesé que usted necesitara asegurarse de esperar que Nuxt este listo antes de construirlo:

// Asegurarse de esperar a que Nuxt este listo para cargar @nuxt/typescript-build antes de proceder
await nuxt.ready()
...
if (config.dev) {
  const builder = new Builder(nuxt)
  await builder.build()
}

Eso es todo, ya todo esta listo para usar Typescript en tus layouts, componentes, plugins y middlewares.

Usted puede revisar la sección del CookBook para ver algunos ejemplos de TypeScript para tus proyectos de Nuxt.

Opciones del módulo

typeCheck

Activa la comprobación de tipos de Typescript en un proceso separado.

Tipo: Boolean o Object
Defecto: true

Cuando esta activado, Nuxt.js usa fork-ts-checker-webpack-plugin para proveer la comprobación de los tipos.

Usted puede usar un Object para reemplazar las opciones del plugins or asignar con un false para desactivarlo.

ignoreNotFoundWarnings

Permite suprimir advertencias de typescript: not found.

Tipo: Boolean
Defecto: false

Cuando esta activado, puedes suprimir las advertencias export ... was not found ....

Puedes ver los antecedentes aqui.

Advertencia: Esta propiedad puede suprimir las advertencias que desea ver. Tenga cuidado como lo configura.

loaders

Customizacion de las opciones de ts-loader

Tipo: Object

Si necesita customizar el loader de Typescript, puedes customizar ambos archivos ts & tsx mediante las opciones del 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
      }
    }
  }
}