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

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.

update

In Sep 2018, should try the new vue-cli with the TypeScript Plugin.

---

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:

1. *.vue file's TypeScript lint in VSCode be supported. Look this issue vetur.

2. Open Source Ecosystem.

   • vue-router
   • vuex-class
   • vue-test-utils

3. New vue-cli in 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.

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

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