Vue全家桶+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 出现

解决方法

也就是说升级你的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 的集成会更加完善！