Abr@X@bra.ru
TypeScript для Nuxt.js

TypeScript для Nuxt.js

25.01.2019
12

В настоящее время я намерен использовать TypeScript для каждого нового проекта JavaScript. Чтобы наслаждаться безопасностью типа, поддерживать определенную скорость разработки и т. д. Из моего первого проекта Nuxt я искал самый простой и элегантный способ использования TypeScript.

Использование TypeScript с Vue не так идеально, и в нем не хватает многих вещей, чтобы воспользоваться всеми преимуществами TypeScript. Однако я боюсь использовать чистый (или с Babel) JavaScript / ECMAScript для проекта Vue. TypeScript помогает. Кроме того, избегает тонны тривиальных ошибок в моем коде.

В этой статье оставляю краткую информацию о текущем состоянии TypeScript на Nuxt, насколько я знаю.

Начиная с Nuxt 2.3.4, у нас должны быть некоторые настройки, чтобы начать использовать TypeScript.

Зависимости

Проект Nuxt требует установки зависимостей TypeScript и ts-loader.

$ npm install -D typescript ts-loader

lang = "ts"

При первом подключение lang = "ts" настройте TypeScript с помощью tsconfig.json в корне проекта.


Это типичная конфигурация, поэтому, есть  возможность редактировать, как нам нравится.

Затем настройте конфигурацию Webpack с помощью модуля. Этот модуль предоставляет настройки ts-loader дает возможность создавать и использовать файлы с расширением .ts для Nuxt и Webpack.


Поместите этот файл в папку modules / typescript.js и укажите его в разделе модулей в nuxt.config.js.
...
export default {
 ...
 modules: [
   '~/modules/typescript.js'
 ],
 ...
}

Это все, чтобы включить TypeScript на Nuxt. Мне потребовалось много времени, чтобы выяснить этот факт, прочитав статьи многих других разработчиков. Было много полезных, но не обязательных настроек / установок. В реальной разработке я знаю, что нам нужно больше, например, TSLint, параллельная проверка типов, стиль компонентов класса, TSX, бла-бла-бла…

Для эффективного написания TypeScript на Nuxt, помимо настройки, есть хороший готовый шаблон. Мы можем начать используя старый способ vue-cli.




TypeScript, Nuxt
Читайте также:
9 хитростей для разработчиков JavaScript в 2019 году

9 хитростей для разработчиков JavaScript в 2019 году

Еще один год закончился, и JavaScript постоянно меняется. Тем не менее, есть несколько советов, которые помогут вам напи...
Читать
GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)

GreenSock для начинающих: учебное пособие по веб-анимации (часть 1)

Моя цель в этой статье - дать вам подробное введение в GreenSock, также известную как GSAP (GreenSock Animation Plat...
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать