我在网上搜索了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...'.
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.
这看起来像最新的vue-cli模板,其中包含大量星星,并支持vue 2.5。
我认为我没有看到其他答案中特别提到的内容
vue init ducksoupdev/vue-webpack-typescript my-project
https://github.com/ducksoupdev/vue-webpack-typescript