Vue全家桶+TypeScript使用總結
前言
最近重構了我之前項目 qq 音樂移動端，使用的技術是 vue，vuex，vue-router，和 typescript，在這期間，遇到的問題還是蠻多的，一會兒我會把我遇到的問題以及解決方法列出來，避免忘記。
重構完成的項目 ===> vue-qq-music
TypeScript與Vue全家桶的配置可以參考以下兩篇文章（在這里由衷感謝兩位作者）：
TypeScript
為什么我要將 TypeScript 和 Vue 集成呢？因為TypeScript 有以下幾個優勢：
- 可讀性 。TypeScript 是 JavaScript 的超集，這意味著他支持所有的 JavaScript 語法。并在此之上對 JavaScript 添加了一些擴展，如interface等。這樣會大大提升代碼的可閱讀性
- 靜態類型檢查 。靜態類型檢查可以避免很多不必要的錯誤，不用在調試的時候才發現問題。
- 代碼提示 。ts 搭配 vscode，代碼提示非常友好
- 代碼重構 。例如全項目更改某個變量名（也可以是類名、方法名，甚至是文件名[重命名文件自動修改的是整個項目的import]），在JS中是不可能的，而TS可以輕松做到。看看下面發生了什么神奇的事情:grin::arrow_down:
遇到的問題以及解決方法
問題一
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例子太少，只好一步一步摸索:joy:
解決方法
把mixins寫在@Component里面...，像這樣：
注意點
- 如果你引用第三方無類型聲明的庫，那就需要自己編寫x.d.ts文件
- 如果引用 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 的集成會更加完善！
來自：https://segmentfault.com/a/1190000013462418