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

Posted 2023-02-22

技术标签:

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

我在网上搜索了一个 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 文档对我来说毫无用处，因为它没有考虑使用 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 部分更新模板，检查它是否有帮助。 【参考方案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 工作流程更好：

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

最后我决定使用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-router

vuex-class

vue-test-utils

设计中的新vue-cli。 click me

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

【讨论】：