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

我在网上搜索了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...'.

Can anyone shine some light on why this happens and how to resolve it? Better yet, I'd very much welcome a concise, minimal, step-by-step example of how to set up a working Vue.js + TypeScript configuration with the webpack template.

I have already successfully completed several client projects that run in production in Vue.js with vanilla JavaScript but this TypeScript tooling in combination with Vue.js just confuses the hell out of me.

伽罗2020/04/03 11:48:55

这看起来像最新的vue-cli模板,其中包含大量星星,并支持vue 2.5。

我认为我没有看到其他答案中特别提到的内容

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

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

蛋蛋猿2020/04/03 11:48:55

使用最新版本的VueJS,可以使用Vue,Typescript和JSX创建可靠且可维护的项目。我已经在Vue.TSX上为初学者创建了样板

小小2020/04/03 11:48:55

更新

在2018年9月,应尝试使用vue-cli带有TypeScript插件的新功能


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

Vue的生态系统越来越像TypeScript:

  1. *.vueTypeScript在VSCode中支持文件的皮棉。看看这个问题vetur

  2. 开源生态系统。

  3. vue-cli设计上的新功能点击我

因此,如果您有时间等待,可以暂时观察一下。或者,您可以参考以下项目:TypeScript-Vue-Starter具有Typescript支持的Webpack模板叉