TypeScript

Nuxt está completamente tipado y proporciona atajos útiles para asegurarse de que tenga acceso a información de tipo precisa cuando esté codificando.

Comprobación de tipos

Por defecto, Nuxt no verifica los tipos cuando ejecutas nuxt dev o nuxt build, por razones de rendimiento.

Para habilitar la comprobación de tipos en tiempo de compilación o desarrollo, instala vue-tsc y typescript como dependencias de desarrollo:

npm install --save-dev vue-tsc typescript

Luego, ejecuta el comando nuxt typecheck para verificar tus tipos:

Terminal

npx nuxt typecheck

Para habilitar la comprobación de tipos en tiempo de compilación o desarrollo, también puedes usar la opción typescript.typeCheck en tu archivo nuxt.config:

nuxt.config.ts

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

Tipos generados automáticamente

Cuando ejecutas nuxt dev o nuxt build, Nuxt genera los siguientes archivos para soporte de tipo en el IDE (y comprobación de tipos):

`.nuxt/nuxt.d.ts`

Este archivo contiene los tipos de cualquier módulo que estés usando, así como los tipos clave que Nuxt requiere. Tu IDE debería reconocer estos tipos automáticamente.

Algunas de las referencias en el archivo son a archivos que solo se generan dentro de tu buildDir (.nuxt) y, por lo tanto, para obtener tipados completos, necesitarás ejecutar nuxt dev o nuxt build.

`.nuxt/tsconfig.json`

Este archivo contiene la configuración básica recomendada de TypeScript para tu proyecto, incluyendo alias resueltos inyectados por Nuxt o módulos que estés usando, para que puedas obtener soporte completo de tipos y autocompletado de rutas para alias como ~/file o #build/file.

Considera usar la sección imports de nuxt.config para incluir directorios más allá de los predeterminados. Esto puede ser útil para la auto-importación de tipos que estás usando en toda tu aplicación.

Lee más sobre cómo extender esta configuración.

Mira un video de Daniel Roe explicando los alias integrados de Nuxt.

Nitro también genera tipos automáticamente para rutas de API. Además, Nuxt también genera tipos para componentes disponibles globalmente y auto-importaciones desde tus composables, además de otras funcionalidades principales.

Ten en cuenta que todas las opciones extendidas desde ./.nuxt/tsconfig.json serán sobrescritas por las opciones definidas en tu tsconfig.json. Sobrescribir opciones como "compilerOptions.paths" con tu propia configuración hará que TypeScript no tenga en cuenta las resoluciones de módulos de ./.nuxt/tsconfig.json. Esto puede llevar a que resoluciones de módulos como #imports no sean reconocidas. :br :br En caso de que necesites extender aún más las opciones proporcionadas por ./.nuxt/tsconfig.json, puedes usar la propiedad alias dentro de tu nuxt.config. Nuxt las recogerá y extenderá ./.nuxt/tsconfig.json en consecuencia.

Comprobaciones estrictas

TypeScript viene con ciertas comprobaciones para brindarte más seguridad y análisis de tu programa.

Las comprobaciones estrictas están habilitadas por defecto en Nuxt para brindarte una mayor seguridad de tipos.

Si actualmente estás convirtiendo tu base de código a TypeScript, es posible que desees desactivar temporalmente las comprobaciones estrictas configurando strict a false en tu nuxt.config:

nuxt.config.ts

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

※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.

La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/guide/concepts/typescript