Как настроить связку vue.js (с vue-loader) + typescript (или flow)?
Собственно, весь вопрос в заголовке. Есть проект на Vue2, использующий vuex + vue-router и собирающийся webpack'ом с vue-loader. Хотелось бы подрубить к нему тайпчекинг, ибо за всеми объектами в сторе становится уже сложно уследить. Потратил на это все дело пару дней, все *.js файлы переделать в *.ts оказалось довольно просто, но вот когда я приступил к *.vue, то ужаснулся. Куча разных гайдов с кучей разных дополнительных лоадеров, декораторов и прочих красот, но ни один не работает как следует. Чувствую, что что-то я готовлю неправильно, но не могу понять, что именно.
Возможно у кого-нибудь завалялся темплэйт для подобных проектов? Ну или, если нет с typescript, возможно есть пример для flow или tcomb?
Заранее спасибо!
P.S. Код кидать не вижу смысла, его слишком много. Но за рамки стандартной архитектуры для связки vue+vuex+vue-router далеко не выходит.
Я подумывал о том, чтобы переписать все куски относящиеся к vuex на TS, а *.vue оставить как есть (в конце концов, там и не должно быть много кода) — как раз из-за нежелания возиться с лоадерами-хреноадерами. Пока остановился на *.d.ts в корне и типах указанных в jsdoc, интеллисенс улучшился и уже стало проще и пару багов отловил.
Но если кто-то покажет хороший бойлерплейт, я бы с удовольствием посмотрел.
Константин Китманов: Судя по всему - я и покажу) Уже сделал связку vue-loader + typescript. Сейчас буду покрывать оставшееся. Единственная проблема на текущий момент - VSCode не хочет искать декларации типов внутри *.vue. Ну и, соответственно, автодополнение так себе. Но и это, я думаю, поправимо.
Константин Китманов: Нет, неправильно понял. VSCode ВООБЩЕ игнорирует любые декларации/описания интерфейсов в *.vue, даже если интерфейс описан в том же файле.
Константин Китманов: Все еще обмазываюсь тайпскриптом, обмажусь до конца, потом запилю гайд. С VSCode, нагуглил, проблема не решаема. Но на гитхабе задача уже поставлена. В октябре. Всего их 3 635 на данный момент...
Александр: я просто хочу глянуть, может в WS будет лучше с подхватом типов (или можно будет сделать устраивающее меня решение). Поэтому мне лично гайд необязательно, просто посмотреть, как устроено.
Константин Китманов: Вот это я дал! Так погрузился в задачи, что забыл ответить. Извиняюсь, аж стыдно.
Нет не мое, я все еще продолжаю экспериментировать с архитектурой. Vuex довольно сложно типизировать, например. dispatch и commit принимают на вход :any и это, похоже, никак не обойти.
По большей части проблема с vue-loader решается тремя правками:
$ npm install vue-typescript-import-dts --save-dev
В tsconfig.json: compilerOptions.types = ["vue-typescript-import-dts"]
В вебпаке в конфиге ts-loader добавить options: {appendTsSuffixTo: [/\.vue$/]}.
Вот и все. Теперь можно безболезненно (почти) использовать TS в .vue компонентах. Главное, задавать экспортируемому компоненту тип:
Но вот при своеобразной архитектуре vue-приложений, типизировать его получается ой как плохо. Какие-то отдельные моменты можно, например actions в Vuex и methods, computed в vue. Но payload для mutations уже никак не проверишь. Приходится полагаться на свою собственную честность и пряморукость :)
В общем и целом, повторюсь, архитектуру я так и не доделал и продолжаю экспериментировать. Идеи есть в голове, но чтобы проверить их, нужно найти время на технические задачи.
vue-class-components вещь клевая, безусловно. Но с синтаксисом может возникнуть путаница, да и у меня не завелось почему-то (я криворук немножечко, но сильно и не пытался). Первый гайд, естественно, обязателен к прочтению (там собственно этот vue-class-components и рекомендуется как один из вариантов), но гайд не исчерпывающий. Так просто связку vue-loader, ts-loader не заведешь, нужны изыски типа того, что я написал в комментарии под самим вопросом. А vue-cli template не использует vue-loader :)
Тем не менее отмечаю как решение, ибо лучшей информации в сети пока и нет.
Средний
