Learn Nuxt with a Collection of 100+ Tips!

TypeScript

Nuxt является полностью типизированным фреймворком и предлагает удобные способы получения точной информации о типах при написании кода.

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

По умолчанию Nuxt не проверяет типы при запуске nuxi dev или nuxi build, из соображений производительности.

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

npm install --save-dev vue-tsc typescript

Затем, запустите команду nuxi typecheck, чтобы проверить ваши типы:

Terminal
npx nuxi typecheck

Чтобы включить проверку типов во время сборки, вы также можете использовать опцию typescript.typeCheck в своем файле nuxt.config:

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

Автоматически генерируемые типы

При запуске nuxi dev или nuxi build, Nuxt генерирует следующие файлы для поддержки типов в IDE (и проверки типов):

.nuxt/nuxt.d.ts

Этот файл содержит типы любых модулей, которые вы используете, а также ключевые типы, требуемые Nuxt. Ваша IDE должна автоматически распознавать эти типы.

Некоторые из ссылок в файле относятся к файлам, которые генерируются только внутри вашей директории buildDir (.nuxt), и поэтому для полной типизации вам потребуется запустить nuxi dev или nuxi build.

.nuxt/tsconfig.json

Этот файл содержит рекомендуемую базовую конфигурацию TypeScript для вашего проекта, включая используемые алиасы, внедренные Nuxt или модулями, которые вы используете, так что вы можете получить полную поддержку типов и автодополнение путей для алиасов, таких как ~/file или #build/file.

Узнайте больше о том, как расширить эту конфигурацию.

Посмотрите видео от Дэниела Ро, в котором объясняются встроенные алиасы Nuxt.
Nitro также автоматически создает типы для API-маршрутов. Более того, Nuxt также генерирует типы для глобально доступных компонентов и автоматически импортирует их из ваших композаблов, а также других основных функций.
Обратите внимание, что все расширенные опции из./.nuxt/tsconfig.json будут перезаписаны опциями, определенными в вашем tsconfig.json. Перезапись опций, таких как "compilerOptions.paths" , собственной конфигурацией приведет к тому, что TypeScript не будет учитывать разрешение модулей из ./.nuxt/tsconfig.json. Это может привести к тому, что разрешение модулей, таких как #imports, не будет распознано.

В случае, если вам необходимо дальнейшее расширение опций, предоставленных ./.nuxt/tsconfig.json, вы можете использовать свойство alias в своем nuxt.config. nuxi учтет их и соответствующим образом расширит ./.nuxt/tsconfig.json.

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

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

Строгие проверки включены в Nuxt по умолчанию, чтобы обеспечить более высокий уровень безопасности типов.

Если вы в настоящее время переводите свою кодовую базу в TypeScript, вы можете временно отключить строгие проверки, установив strict в false в своем nuxt.config:

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