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

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://v2.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.

Answer 2

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 .

Answer 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

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

Answer 4

With the latest versions of VueJS it is possible to create a reliable & maintainable project with Vue, Typescript & JSX. I have created a boilerplate for starters at Vue.TSX