How to use TypeScript with Vue.js and Single File Components?

Question

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.

Answer 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:

1. vuex with this.$store.dispatch('some_action')
2. Vue.use, Vue.mixin and other similar things that mutate the global Vue instance

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:

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

In the end I have decided to use flow. Check this project template if you are interested.