Как использовать TypeScript с Vue.js и компонентами одного файла?

Я искал по всему Интернету минимальный рабочий пример установки Vue.js + TypeScript. Как обычно, "современный стек JavaScript", большинство из этих руководств либо устарели, несмотря на то, что они написаны всего пару месяцев назад или в зависимости от конкретной настройки. Похоже, что не существует общего, проверяемого примера.

Вот некоторые из рассмотренных мной ресурсов:

• https://vuejs.org/v2/guide/typescript.html
• https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/
• http://www.mindissoftware.com/Vue-Sample-in-Typescript/
• https://medium.com/@hayavuk/setting-vue-up-for-typescript-goodness-a6ddc4072f4f
• https://johnpapa.net/vue-typescript/
• https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project/

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

Официальная документация Vue.js бесполезна для моей цели, потому что она не рассматривает настройку TypeScript с SFC. Последнее, что я пробовал, было последним в списке. Я точно следил за настройкой, но меня это вызвало следующую ошибку на npm run dev:

[tsl] ERROR in /Users/[REDACTED]/ts-test/src/main.ts(12,3)
      TS2345: Argument of type '{ el: string; router: any; template: string; components: { App: { name: string; }; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
  Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.

Кто-нибудь может рассказать о том, почему это происходит и как его решить? Еще лучше, я очень хотел бы получить краткий, минимальный шаг за шагом пример настройки рабочей конфигурации Vue.js + TypeScript с помощью шаблона webpack.

Я уже успешно выполнил несколько клиентских проектов, которые запускаются в Vue.js с помощью ванильного JavaScript, но эта утилита TypeScript в сочетании с Vue.js просто путает меня от меня.

Ответы

Ответ 1

Я попытался использовать typescript с vue. Мое личное мнение: это плохо работает. Поскольку некоторые vue внутренние элементы не подходят для typescript:

• vuex с this.$store.dispatch('some_action')
• Vue.use, Vue.mixin и другие подобные вещи, которые мутируют глобальный экземпляр vue

Но, выполняя мои исследования, я нашел эти замечательные шаблоны: typescript-vue-tutorial Daniel Rosenwasser и TypeScript-Vue-Starter от Microsoft.

Я также попытался подражать vue-webpack-template с помощью typescript самостоятельно: https://github.com/sobolevn/wemake-vue-template

Кроме того, есть хорошие инструменты для улучшения рабочего процесса typescript + vue:

• vuex-typescript
• vue-class-component
• vue-property-decorator

В конце концов я решил использовать flow. Если вы заинтересованы, отметьте этот шаблон проекта.

Ответ 2

Абсолютное согласие @sobolevn мнение. Но, есть много информации для меня, чтобы судить, поддержка сообщества для TypeScript стоит того, чтобы ждать.

В экосистеме Vue больше TypeScript:

• *.vue файл TypeScript lint в VSCode будет поддерживаться. Посмотрите этот вопрос vetur.

• Экосистема с открытым исходным кодом.

  • vue-router
  • vuex-class
  • vue-test-utils

• Новый vue-cli в дизайне. нажмите меня

Итак, если у вас есть время подождать, вы можете временно наблюдать в течение некоторого времени. Или вы можете обратиться к этим проектам: TypeScript-Vue-Starter и A Виджет шаблона Webpack с поддержкой TypeScript.

Ответ 3

Это похоже на последний шаблон vue-cli со значительным количеством звезд и поддержкой vue 2.5.

Я не думаю, что видел, как это было сказано в других ответах

vue init ducksoupdev/vue-webpack-typescript my-project

https://github.com/ducksoupdev/vue-webpack-typescript