# 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
# O
npm install --save-dev @nuxt/typescript-build @nuxt/types

# Configuración

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

// nuxt.config.js
export default {
  buildModules: ['@nuxt/typescript-build']
}

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": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

TIP

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

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:

loaders: {
  ts: {
    silent: true
  },
  tsx: {
    silent: true
  }
}