Vue全家桶+TypeScript使用總結

前言

最近重構了我以前項目 qq 音樂移動端，使用的技術是 vue，vuex，vue-router，和 typescript，在這期間，遇到的問題仍是蠻多的，一下子我會把我遇到的問題以及解決方法列出來，避免忘記。

重構完成的項目 ===> vue-qq-music

TypeScript與Vue全家桶的配置能夠參考如下兩篇文章（在這裏由衷感謝兩位做者）：

1. vue + typescript 新項目起手式
2. Vue2.5+ Typescript 引入全面指南 - Vuex篇

TypeScript

爲何我要將TypeScript 和 Vue 集成呢？由於TypeScript 有如下幾個優點：

• 可讀性。TypeScript 是 JavaScript 的超集，這意味着他支持全部的 JavaScript 語法。並在此之上對 JavaScript 添加了一些擴展，如interface等。這樣會大大提高代碼的可閱讀性
• 靜態類型檢查。靜態類型檢查能夠避免不少沒必要要的錯誤，不用在調試的時候才發現問題。
• 代碼提示。ts 搭配 vscode，代碼提示很是友好
• 代碼重構。例如全項目更改某個變量名（也能夠是類名、方法名，甚至是文件名[重命名文件自動修改的是整個項目的import]），在JS中是不可能的，而TS能夠輕鬆作到。看看下面發生了什麼神奇的事情?⬇️

遇到的問題以及解決方法

問題一

ts 沒法識別$ref

解決方法
① 直接在 this.$refs.xxx 後面申明類型如：

this.$refs.lyricsLines as HTMLDivElement;

② 在export default class xxx extends Vue裏面聲明所有的$ref 的類型

$refs: {
    audio: HTMLAudioElement,
    lyricsLines: HTMLDivElement
}

問題二

ts 沒法識別 require

解決方法

安裝聲明文件

yarn add @types/webpack-env -D

問題三

運行npm run build 出現

解決方法

You can fix this by using the most recent beta version of uglifyjs-webpack-plugin. Our team is working to remove completely the UglifyJsPlugin from within webpack, and instead have it as a standalone plugin.

If you do yarn add uglifyjs-webpack-plugin@beta --dev or npm install uglifyjs-webpack-plugin@beta --save-dev you should receive the latest beta which does successfully minify es6 syntax. We are hoping to have this released from beta extremely soon, however it should save you from errors for now!

也就是說升級你的uglifyjs-webpack-plugin版本：
yarn add uglifyjs-webpack-plugin@beta --dev

問題四

vue-property-decorator 裝飾器寫法不對。當時我是要把 mixins，注入到組件裏，我就這樣寫：

ts提示找不到 mixin。我就很納悶爲何找不到名字，因爲官網vue-property-decorator例子太少，只好一步一步摸索?

解決方法

把mixins寫在@Component裏面...，像這樣：

注意點

1. 若是你引用第三方無類型聲明的庫，那就須要本身編寫x.d.ts文件
2. 若是引用 ui 組件的時候，若是控制檯出現Property '$xxx' does not exist on type 'App'的話，那麼能夠在vue-shim.d.ts增長

declare module 'vue/types/vue' {
  interface Vue {
    $xxx: any,
  }
}

最後

通過幾天的折騰，終於把項目重構完成，我我的認爲加上 TypeScript，確實效率挺高了許多，不過 Vue+TypeScript 仍是沒 Angular支持那麼完善，相信以後 vue 對於 ts 的集成會更加完善！