javascript - 如何将 TypeScript 与 Vue.js 和单文件组件一起使用？

Question

我在整个网络上搜索了 Vue.js + TypeScript 设置的最小工作示例。按照“现代 JavaScript 堆栈”的惯例，这些教程中的大多数要么是过时的，尽管是几个月前写的，要么取决于非常具体的设置。似乎没有通用的、可验证的示例可供构建。

以下是我考虑的一些资源:

• https://v2.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 文档对我来说毫无用处，因为它没有考虑使用 SFC 设置 TypeScript。我最近尝试的是列表中的最后一个。我严格按照设置进行操作，但它让我在 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...'.

谁能阐明为什么会发生这种情况以及如何解决它？更好的是，我非常欢迎一个简洁、最小的分步示例，说明如何使用 webpack 模板设置有效的 Vue.js + TypeScript 配置。

我已经成功地完成了几个使用普通 JavaScript 在 Vue.js 生产环境中运行的客户端项目，但是这个 TypeScript 工具与 Vue.js 的结合让我很困惑。

Answer 1

我尝试将 typescript 与 vue 一起使用。我个人的看法:效果不好。由于某些 vue 内部构件不适合 typescript:

1. vuex 与 this.$store.dispatch('some_action')
2. Vue.use、Vue.mixin 和其他类似的改变全局 Vue 实例的东西

但是，在进行研究时，我发现了这些很棒的样板:typescript-vue-tutorial丹尼尔·罗森瓦瑟 (Daniel Rosenwasser) 和 TypeScript-Vue-Starter由微软。

我自己也尝试用 typescript 模仿 vue-webpack-template:https://github.com/sobolevn/wemake-vue-template

还有一些不错的工具可以让您的 typescript + vue 工作流程更好:

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

最后我决定使用flow .检查this project template如果你感兴趣。