TypeScript

Nuxt полностью типизирован и даёт удобные возможности для работы с типами при разработке.

Проверка типов

По умолчанию Nuxt не проверяет типы при запуске nuxt dev или nuxt build — ради скорости.

Чтобы включить проверку типов при сборке или в dev, установите vue-tsc и typescript как dev-зависимости:

npm install --save-dev vue-tsc typescript

Затем запустите команду nuxt typecheck:

Terminal
npx nuxt typecheck

Проверку типов при сборке или в dev можно также включить через опцию typescript.typeCheck в nuxt.config:

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
  },
})

Автогенерируемые типы

Проекты Nuxt опираются на автогенерируемые типы. Они лежат в директории .nuxt и создаются при запуске dev-сервера или сборки. Их можно сгенерировать вручную командой nuxt prepare.

Файлы tsconfig.json в .nuxt содержат рекомендуемую базовую конфигурацию TypeScript, ссылки на автоимпорты, типы API-маршрутов, алиасы путей вроде #imports, ~/file, #build/file и др.

Nuxt и модули опираются на эту конфигурацию и могут её расширять. Менять tsconfig.json вручную не рекомендуется — можно перезаписать важные настройки. Расширяйте конфиг через nuxt.config.ts. Подробнее о расширении конфигурации.
Видео от Daniel Roe о встроенных алиасах Nuxt.

Ссылки на проекты (Project References)

Nuxt использует TypeScript Project References для ускорения проверки типов и лучшей поддержки в IDE. Код разбивается на меньшие части.

Как Nuxt использует Project References

При запуске nuxt dev, nuxt build или nuxt prepare Nuxt создаёт несколько tsconfig.json для разных частей приложения:

  • .nuxt/tsconfig.app.json — код приложения в app/
  • .nuxt/tsconfig.node.jsonnuxt.config.ts и файлы вне остальных контекстов
  • .nuxt/tsconfig.server.json — серверный код (если есть)
  • .nuxt/tsconfig.shared.json — общий код для app и server (типы, утилиты без привязки к окружению)

В каждом файле настроены нужные ссылки и конфигурация для своего контекста.

Для обратной совместимости Nuxt по-прежнему генерирует .nuxt/tsconfig.json. Рекомендуется использовать TypeScript project references с новыми файлами (.nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json и т.д.) для лучшей типизации и производительности. Старый файл будет удалён в будущей версии Nuxt.

Зачем нужны Project References

  • Быстрее сборка: TypeScript может не пересобирать неизменённые части
  • Лучше работа IDE: быстрее подсказки и проверка ошибок
  • Изолированная компиляция: ошибки в одной части не блокируют сборку остальных
  • Понятные зависимости: каждая часть явно объявляет зависимости

Расширение типов и Project References

Проект разбит на несколько типовых контекстов, поэтому расширять типы нужно в правильном контексте. TypeScript не увидит расширения вне соответствующих директорий, если они не подключены в нужном контексте.

Например, расширения типов для контекста app должны лежать в app/.

Аналогично:

  • для контекста server — файл в server/;
  • для типов общих для app и server — в shared/.
Подробнее о расширении типов для конкретных контекстов из файлов вне этих директорий — в руководстве для авторов модулей.

Строгие проверки

В TypeScript есть проверки для большей надёжности и анализа кода.

Строгие проверки по умолчанию включены в Nuxt при включённой опции typescript.typeCheck.

При постепенном переходе на TypeScript строгие проверки можно временно отключить, задав strict: false в nuxt.config:

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    strict: false,
  },
})