Vue.js + TypeScript: Намного более простая работа в соответствующем редакторе кода

Vue.js + TypeScript: Намного более простая работа в соответствующем редакторе кода

От автора: Vue сейчас в тренде, и я уже давно подумывал о том, чтобы создать серьезный проект на нем, как только появится возможность. Но была небольшая проблема — одним из требований проекта было написание его на TypeScript. Сначала мне было очень сложно представить, как вообще объединить их, но vue-cli позволил сделать это очень просто.

Я бы солгал, если бы сказал, что процесс был абсолютно безболезненным. Были моменты, когда я во фрустрации часами смотрел на экран, были момент, когда я, не сдержавшись, бил кулаком по столу. Но после месяца работы с Vue js TypeScript я могу сказать, что оно того стоит — и если бы мне пришлось кодировать другое приложение на Vue, я бы делал этот только с TypeScript.

Базовый уровень

В этой статье рассказывается об объединении Vue и TypeScript, и, соответственно, предполагаются базовые знания по обоим. Если у вас еще не было возможности поэкспериментировать с ними, доступно отличное руководство по Vue, а документация TypeScript — отличный ресурс для начала.

Нам нужно установить vue-cli глобально, чтобы мы могли быстро развернуть проект Vue. Установите vue-cli, выполнив в терминале следующую команду:

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

Приступаем к работе

Теперь, когда мы установили vue-cli, все, что нам нужно сделать, чтобы получить проект Vue + TypeScript — это запустить vue create. Создавая новый проект, выберите TypeScript.

Вот результат, который вы получите, когда наш проект начнет разворачиваться:

vue-cli также предоставляет возможность выбирать Babel наряду с TypeScript для полифиллов, препроцессоры CSS, библиотеки модульного тестирования (я выбрал Jest, вперед Jest!), как и другие элементы конфигурации. Вы даже можете сохранить свой выбор в пресет, чтобы использовать его позже, для другого проекта. Вот краткое изложение вопросов, которые вам будут заданы при настройке проекта:

Стоит упомянуть, что vue-cli 3.0 поставляется с пользовательским интерфейсом, что упрощает создание нового проекта. Запустите vue ui в терминале, после чего откроется пользовательский интерфейс vue-cli, в котором вы можете настроить новый проект.

Что мы имеем из коробки?

После выполнения vue-cli мы получаем структуру каталогов нашего приложения со всеми настройками.

tsconfig.json: Это все настройки, и мы можем отредактировать его в соответствии с нашими требованиями.

shims-vue.d.ts: Это уже настроенные шимы, чтобы помочь TypeScript понять файлы .vue (отдельные файловые компоненты) при их импорте.

vue-property-decorator: Если вы решили использовать компоненты стиля класса, vue-cli добавляет этот плагин, чтобы мы могли использовать различные декораторы. Это очень удобно и делает код более читаемым.

Компоненты классов: Если вы решите их использовать, vue-cli создаст для вас площадку. Имейте в виду, что вам все равно нужно будет регистрировать хуки маршрутизатора, чтобы компоненты классов могли их обрабатывать.

Настройка Sass

Одна вещь, которую мне нужно было настроить, и я хотел бы, чтобы это можно было получать из коробки — это открытые части Sass. Чтобы избежать импорта переменных и миксинов Sass в каждом компоненте, мне нужно было загрузить их в vue.config.js. shared.scss — это файл, экспортирующий все переменные и миксины, которые используются в приложении.

Вот, выглядела моя настройка Sass:

Декоратор свойств Vue

Пакет vue-property-decorator предоставляет свойства Vue и делает их доступными для использования в качестве декораторов. В своем приложении я использовал только @Component, @Prop, @Watch, но есть другие, такие как @Emit, @Inject и @Model, которые делают код намного более детализированным при его более широком использовании.

Vuex

У Vuex есть отличная функция — он поддерживает загрузку TypeScript и сначала я даже не знал об этом. Я начал искать корректные способы совместить Vuex с TypeScript и наткнулся на курс Алекса Ховера Моралеса на egghead.io по Управлению состояниями VUE.js с помощью Vuex и TypeScript. Это помогло мне найти правильный способ управления состояниями Vuex при использовании TypeScript. Например:

Vuex-class

Это еще одна вещь, о которой я не знал, когда только начинал. Я создавал геттеры почти для всего, но чувствовал это не правильно. Я начал искать лучшие способы сделать это и нашел интересную статью Франческо Витулло, которая прояснила мне кое-что. Из нее я узнал о vuex-class, который предоставляет декораторы для всех vuex-mappers. Итак, вместо того, чтобы писать новый геттер для простого доступа к свойству в состоянии, я мог бы сделать это:

Опыт разработки с помощью VS Code

Для TypeScript опыт кодирования в VS Code намного лучше. Не нужно постоянно возвращаться назад, чтобы проверить, какие типы мутаций я объявлял в mutation-types.ts, потому что VS Code может их распознать и предложить правильные, когда я печатаю.

То же самое касается модификации состояния в мутациях — для TypeScript редактор знал, как выглядит моя структура состояний, и предлагал корректные свойства.

Если вы используете VS Code, я настоятельно рекомендую использовать плагин Vetur, потому что он предоставляет инструменты Vue и поставляется с другими интересными функциями, такими как подсветка синтаксиса (это отлично работает с однофайловыми компонентами Vue) прямо из коробки.

Заключение

Как и все остальное в экосистеме JavaScript, Vue + TypeScript по-прежнему есть куда развиваться. Например, я не мог использовать vuelidate, потому что для него нет тайпингов. Но, к счастью, vee-validate предоставил обходное решение, поэтому мне не пришлось идти по сложному пути написания этих документов.

В заключение я нашел, что мой опыт разработки стал намного более плавным, а с VS Code картина вообще кардинально меняется, когда вы работаете с TypeScript. На самом деле нет необходимости расхваливать Vue — вы очень легко можете начать работать с ним, и увидите, сколько времени это вам сэкономит.

Автор: Vivek Patel

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: