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

【问题标题】：How to use TypeScript with Vue.js and Single File Components?如何将 TypeScript 与 Vue.js 和单文件组件一起使用？
【发布时间】：2018-06-02 17:03:48
【问题描述】：

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

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

我使用的基本模板是通过运行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 的结合让我很困惑。

【问题讨论】：

你好，这是一个带有打字稿的模板，希望对您有所帮助github.com/morganster/vue-ts-webpack-template
现在很不幸，因为它没有处理 Vue 路由器部分。
就目前而言，所有示例要么臃肿复杂，要么没有考虑 vue-router/vuex。我即将对这种设置失去耐心。我可能会完全放弃它并像往常一样继续。
你好，我只是用 vue-router 部分更新模板，检查它是否有帮助。

标签： javascript typescript webpack vue.js

【解决方案1】：

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

vuex 与 this.$store.dispatch('some_action')
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 工作流程更好：

最后我决定使用flow。如果您有兴趣，请查看this project template。

【讨论】：

谢谢。这是一个有趣的观察，因为我从我读过的几乎所有帖子和文章中得到的印象是 TypeScript + Vue.js 将是一个很好的匹配，特别是 TypeScript 会很好用。到目前为止，我只能说这令人沮丧。我不明白为什么我应该花几个小时来让我的工具正常工作。
@herrbischoff 这也是我最大的问题。
我尝试过 Flow，但在与 JavaScript/TypeScript 语言服务器结合使用时会产生错误。在 Vim 和 VScode 中，语言服务器抱怨 // @flow 和类型声明是 TypeScript 独有的。伙计，这整个 JavaScript 堆栈简直就是一场噩梦……社区会不会深吸一口气，定义工作默认值，修复不起作用的地方并从那里继续？让我感到沮丧的是，我怀疑我是否应该根本再进行任何前端开发。
嗯，破坏 IDE 支持并不是现代前端中最糟糕的事情！

【解决方案2】：

更新

2018 年 9 月，应该尝试使用新的 vue-cli 和 TypeScript Plugin。

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

Vue 的生态系统更倾向于 TypeScript：

支持 VSCode 中的*.vue 文件的TypeScript lint。看这个问题vetur。
开源生态系统。
设计中的新vue-cli。 click me

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

【讨论】：

【解决方案3】：

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

我想我没有在其他答案中看到具体提到它

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

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

【讨论】：

【解决方案4】：

使用最新版本的 VueJS，可以使用 Vue、Typescript 和 JSX 创建一个可靠且可维护的项目。我在Vue.TSX

为初学者创建了一个样板文件

【讨论】：