如何將 TypeScript 與 Vue.js 和單文件組件一起使用？

Question

我在網上搜索了一個 Vue.js + TypeScript 設置的最小工作示例。 按照“現代 JavaScript 堆棧”的慣例，這些教程中的大多數要么是過時的，盡管是在幾個月前編寫的，要么取決於非常具體的設置。 似乎沒有通用的、可驗證的示例可以作為基礎。

以下是我考慮的一些資源：

• 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/

我使用的基本模板是通過運行帶有所有默認選項的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...'.

誰能闡明為什么會發生這種情況以及如何解決它？ 更好的是，我非常歡迎一個簡潔的、最小的、逐步的示例，說明如何使用webpack模板設置工作的 Vue.js + TypeScript 配置。

我已經成功地完成了幾個在 Vue.js 中使用 vanilla JavaScript 在生產環境中運行的客戶端項目，但是這個 TypeScript 工具與 Vue.js 的結合讓我很困惑。

Answer 1

我嘗試將typescript與vue一起使用。 我個人的看法：效果不好。 由於某些vue內部不適合typescript ：

1. vuex與this.$store.dispatch('some_action')
2. Vue.use 、 Vue.mixin和其他類似的改變全局Vue實例的東西

但是，在進行研究時，我發現了這些精彩的樣板：Daniel Rosenwasser 的 typescript -vue-tutorial和 Microsoft 的 TypeScript-Vue-Starter 。

我也嘗試過自己用typescript模仿vue-webpack-template ： https ://github.com/sobolevn/wemake-vue-template

還有一些很好的工具可以讓你的typescript + vue工作流程更好：

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

最后我決定使用flow 。 如果您有興趣，請查看此項目模板。

Answer 2

更新

在 2018 年 9 月，應該嘗試使用帶有TypeScript 插件的新vue-cli 。

---

絕對同意@sobolevn 的意見。 但是，有很多信息讓我判斷，社區對 TypeScript 的支持值得等待。

Vue 的生態系統更像是 TypeScript：

1. *.vue文件在 VSCode 中的TypeScript lint 得到支持。 看看這個問題vetur 。

2. 開源生態系統。

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

3. 設計中的新vue-cli 。 點我

所以如果你有時間等待，你可以暫時觀察一段時間。 或者，您可以參考這些項目： TypeScript-Vue-Starter和A Webpack Template Fork With Typescript Support 。

Answer 3

這看起來像是最新的 vue-cli 模板，有大量的星星並支持 vue 2.5。

我認為我沒有在其他答案中特別提到它

vue init ducksoupdev/vue-webpack-typescript my-project

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

Answer 4

使用最新版本的 VueJS，可以使用 Vue、Typescript 和 JSX 創建一個可靠且可維護的項目。 我為Vue.TSX的初學者創建了一個樣板文件