如何将 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 配置。

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

Answer 1

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

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

但是，在进行研究时，我发现了这些精彩的样板：Daniel Rosenwasser 的 typescript -vue-tutorial和 Microsoft 的 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 。 如果您有兴趣，请查看此项目模板。

Answer 2

更新

在 2018 年 9 月，应该尝试使用带有TypeScript 插件的新vue-cli 。

---

绝对同意@sobolevn 的意见。 但是，有很多信息让我判断，社区对 TypeScript 的支持值得等待。

Vue 的生态系统更像是 TypeScript：

1. *.vue文件在 VSCode 中的TypeScript lint 得到支持。 看看这个问题vetur 。

2. 开源生态系统。

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

3. 设计中的新vue-cli 。 点我

所以如果你有时间等待，你可以暂时观察一段时间。 或者，您可以参考这些项目： TypeScript-Vue-Starter和A Webpack Template Fork With Typescript Support 。

Answer 3

这看起来像是最新的 vue-cli 模板，有大量的星星并支持 vue 2.5。

我认为我没有在其他答案中特别提到它

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

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

Answer 4

使用最新版本的 VueJS，可以使用 Vue、Typescript 和 JSX 创建一个可靠且可维护的项目。 我为Vue.TSX的初学者创建了一个样板文件