I have searched all over the web for a minimal, working example of a Vue.js + TypeScript setup. As per usual with the "modern JavaScript stack", most of these tutorials are either out-of-date despite being written just a couple of months ago or depending on a very specific setup. There appears to be no generic, verifiable example to build on.
Here are some of the resources I considered:
- 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/
The basic template I use is the one provided by running vue-cli init webpack with all default options. As this produces a lot of code, I'm not pasting everything here. If there is need for some specific excerpts, I will gladly update the question.
The official Vue.js documentation is useless for my purpose because it doesn't consider setting up TypeScript with SFCs. The latest I tried was the last on of the list. I followed the setup precisely but it runs me into the following error on 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.
3 Answers
Answers 1
I have tried to use typescript with vue. My personal opinion: it does not work well. Since some vue internals are not suited for typescript:
vuexwiththis.$store.dispatch('some_action')Vue.use,Vue.mixinand other similar things that mutate the globalVueinstance
But, while doing my research I have found these wonderful boilerplates: typescript-vue-tutorial by Daniel Rosenwasser and TypeScript-Vue-Starter by Microsoft.
I have also tried to mimic vue-webpack-template with typescript by myself: https://github.com/sobolevn/wemake-vue-template
There are also nice tools to make your typescript + vue workflow better:
In the end I have decided to use flow. Check this project template if you are interested.
Answers 2
Absolute agree @sobolevn's opinion. But, there is a lot of information for me to judge, community support for TypeScript is worth the wait.
Vue's ecosystem is being more TypeScript:
*.vuefile'sTypeScriptlint in VSCode be supported. Look this issue vetur.Open Source Ecosystem.
New
vue-cliin design. click me
So if you have time to wait, you can temporarily observe for some time. Or, you can refer to these projects: TypeScript-Vue-Starter and A Webpack Template Fork With Typescript Support.
Answers 3
This looks like the latest vue-cli template with a significant amount of stars and support for vue 2.5.
I don't think I saw it specifically mentioned in the other answers
vue init ducksoupdev/vue-webpack-typescript my-project
0 comments:
Post a Comment