Как настроить поддержку TypeScript в Nuxt.js?

Пользователь

от krista , в категории: JavaScript , год назад

Как настроить поддержку TypeScript в Nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от caterina , год назад

@krista 

Для настройки поддержки TypeScript в Nuxt.js необходимо выполнить следующие шаги:

  1. Установить необходимые зависимости:
1
npm install --save-dev @nuxt/typescript-build typescript


  1. Создать файл tsconfig.json в корневой папке проекта:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "lib": ["es2015", "es2016"],
    "noEmitOnError": true,
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true
  }
}


  1. В nuxt.config.js добавить следующие строки:
1
2
3
export default {
  buildModules: ['@nuxt/typescript-build']
}


  1. Создать папку ~/plugins и в ней файл typescript.js со следующим содержанием:
1
2
3
4
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)


  1. Добавить путь до файла typescript.js в nuxt.config.js в поле plugins:
1
2
3
export default {
  plugins: ['~/plugins/typescript.js']
}


  1. Запустить проект:
1
npm run dev


Теперь проект поддерживает TypeScript. Можно создавать файлы с расширением .ts и использовать все возможности TypeScript.