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 的集成会更加完善！