Vue全家桶+TypeScript使用总结
小神仙
7年前
<h2>前言</h2> <p>最近重构了我之前项目 qq 音乐移动端，使用的技术是 vue，vuex，vue-router，和 typescript，在这期间，遇到的问题还是蛮多的，一会儿我会把我遇到的问题以及解决方法列出来，避免忘记。</p> <p>重构完成的项目 ===> <a href="/misc/goto?guid=4959757279750400976" rel="nofollow,noindex">vue-qq-music</a></p> <p>TypeScript与Vue全家桶的配置可以参考以下两篇文章（在这里由衷感谢两位作者）：</p> <ol> <li><a href="/misc/goto?guid=4959757279848049285" rel="nofollow,noindex">vue + typescript 新项目起手式</a></li> <li><a href="/misc/goto?guid=4959757279944209968" rel="nofollow,noindex">Vue2.5+ Typescript 引入全面指南 - Vuex篇</a></li> </ol> <h2>TypeScript</h2> <p>为什么我要将 TypeScript 和 Vue 集成呢？因为TypeScript 有以下几个优势：</p> <ul> <li><strong>可读性</strong> 。TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如interface等。这样会大大提升代码的可阅读性</li> <li><strong>静态类型检查</strong> 。静态类型检查可以避免很多不必要的错误，不用在调试的时候才发现问题。</li> <li><strong>代码提示</strong> 。ts 搭配 vscode，代码提示非常友好</li> <li><strong>代码重构</strong> 。例如全项目更改某个变量名（也可以是类名、方法名，甚至是文件名[重命名文件自动修改的是整个项目的import]），在JS中是不可能的，而TS可以轻松做到。看看下面发生了什么神奇的事情:grin::arrow_down:</li> </ul> <p><img src="https://simg.open-open.com/show/cc967882968514c29ef32d60e47dc6bb.gif"></p> <h2>遇到的问题以及解决方法</h2> <h3>问题一</h3> <p>ts 无法识别$ref</p> <p>解决方法</p> <p>① 直接在 this.$refs.xxx 后面申明类型如：</p> <pre> <code class="language-typeScript">this.$refs.lyricsLines as HTMLDivElement;</code></pre> <p>② 在 export default class xxx extends Vue 声明全部的$ref 的类型</p> <pre> <code class="language-typeScript">$refs: { audio: HTMLAudioElement, lyricsLines: HTMLDivElement }</code></pre> <h3>问题二</h3> <p>ts 无法识别 require</p> <p>解决方法</p> <p>安装声明文件</p> <pre> <code class="language-typeScript">yarn add @types/webpack-env -D</code></pre> <h3>问题三</h3> <p>运行 npm run build 出现</p> <p><img src="https://simg.open-open.com/show/54e59631eeb1039e8c3e991b7025897d.png"></p> <p>解决方法</p> <p>You can fix this by <strong>using the most recent beta version</strong> of uglifyjs-webpack-plugin . Our team is working to remove completely the UglifyJsPlugin from within webpack, and instead have it as a standalone plugin.</p> <p>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!</p> <p>也就是说升级你的uglifyjs-webpack-plugin版本：</p> <p>yarn add uglifyjs-webpack-plugin@beta --dev</p> <h3>问题四</h3> <p><a href="/misc/goto?guid=4959757280044903365" rel="nofollow,noindex">vue-property-decorator</a> 装饰器写法不对。当时我是要把 mixins，注入到组件里，我就这样写：</p> <p><img src="https://simg.open-open.com/show/93b6b38ceac1b55493a46b6e0baffcfe.png"></p> <p>ts提示找不到 mixin。我就很纳闷为什么找不到名字，由于官网vue-property-decorator例子太少，只好一步一步摸索:joy:</p> <p>解决方法</p> <p>把mixins写在@Component里面...，像这样：</p> <p><img src="https://simg.open-open.com/show/6fd7d7d77937ac9994a4f3b7430db427.png"></p> <h2>注意点</h2> <ol> <li>如果你引用第三方无类型声明的库，那就需要自己编写x.d.ts文件</li> <li>如果引用 ui 组件的时候，如果控制台出现 Property '$xxx' does not exist on type 'App' 的话，那么可以在 vue-shim.d.ts 增加</li> </ol> <pre> <code class="language-typeScript">declare module 'vue/types/vue' { interface Vue { $xxx: any, } }</code></pre> <h2>最后</h2> <p>经过几天的折腾，终于把项目重构完成，我个人认为加上 TypeScript ，确实效率挺高了许多，不过 Vue+TypeScript 还是没 Angular 支持那么完善，相信之后 vue 对于 ts 的集成会更加完善！</p> <p> </p> <p>来自：https://segmentfault.com/a/1190000013462418</p> <p> </p>