От автора: Vue сейчас в тренде, и я уже давно подумывал о том, чтобы создать серьезный проект на нем, как только появится возможность. Но была небольшая проблема — одним из требований проекта было написание его на TypeScript. Сначала мне было очень сложно представить, как вообще объединить их, но vue-cli позволил сделать это очень просто.
Я бы солгал, если бы сказал, что процесс был абсолютно безболезненным. Были моменты, когда я во фрустрации часами смотрел на экран, были момент, когда я, не сдержавшись, бил кулаком по столу. Но после месяца работы с Vue js TypeScript я могу сказать, что оно того стоит — и если бы мне пришлось кодировать другое приложение на Vue, я бы делал этот только с TypeScript.
Базовый уровень
В этой статье рассказывается об объединении Vue и TypeScript, и, соответственно, предполагаются базовые знания по обоим. Если у вас еще не было возможности поэкспериментировать с ними, доступно отличное руководство по Vue, а документация TypeScript — отличный ресурс для начала.
Нам нужно установить vue-cli глобально, чтобы мы могли быстро развернуть проект Vue. Установите vue-cli, выполнив в терминале следующую команду:
npm install -g @vue/cli
Когда вы сделаете это, все хорошо. Если у вас не установлен TypeScript, вам не нужно делать это заранее, поскольку vue-cli позаботится об этом, когда вы начнете новый проект и выберете TypeScript.
Приступаем к работе
Теперь, когда мы установили vue-cli, все, что нам нужно сделать, чтобы получить проект Vue + TypeScript — это запустить vue create. Создавая новый проект, выберите TypeScript.
vue create <app-name>
Вот результат, который вы получите, когда наш проект начнет разворачиваться:
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:
chainWebpack: (config) => { config .module .rule('vue') .uses .get('vue-loader') .tap(({ loaders, loaders: { scss }, ...options }) => ({ ...options, loaders: { ...loaders, scss: [ ...scss, { loader: 'sass-resources-loader', options: { resources: [ './src/styles/shared.scss', ], }, }, ], }, }));
Декоратор свойств Vue
Пакет vue-property-decorator предоставляет свойства Vue и делает их доступными для использования в качестве декораторов. В своем приложении я использовал только @Component, @Prop, @Watch, но есть другие, такие как @Emit, @Inject и @Model, которые делают код намного более детализированным при его более широком использовании.
Vuex
У Vuex есть отличная функция — он поддерживает загрузку TypeScript и сначала я даже не знал об этом. Я начал искать корректные способы совместить Vuex с TypeScript и наткнулся на курс Алекса Ховера Моралеса на egghead.io по Управлению состояниями VUE.js с помощью Vuex и TypeScript. Это помогло мне найти правильный способ управления состояниями Vuex при использовании TypeScript. Например:
// actions.ts
import { ActionTree } from 'vuex';
import { RootState, ModuleState } from '@/types'; const actions: ActionTree<ModuleState, RootState> = { // все действия происходят здесь
};
Vuex-class
Это еще одна вещь, о которой я не знал, когда только начинал. Я создавал геттеры почти для всего, но чувствовал это не правильно. Я начал искать лучшие способы сделать это и нашел интересную статью Франческо Витулло, которая прояснила мне кое-что. Из нее я узнал о vuex-class, который предоставляет декораторы для всех vuex-mappers. Итак, вместо того, чтобы писать новый геттер для простого доступа к свойству в состоянии, я мог бы сделать это:
import { State,
} from 'vuex-class' @Component
export class MyComp extends Vue { @State(state => state.bar) stateBar
}
Опыт разработки с помощью 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
Источник: https://css-tricks.com/
Редакция: Команда webformyself.