此文已由作者張漢銳授權(quán)網(wǎng)易云社區(qū)發(fā)布。

歡迎訪問網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗。

前言：對于我們而言，typescript 更像一個工具

官方指南

從 vue2.5 之后，vue 對 ts 有更好的支持。根據(jù)官方文檔，vue 結(jié)合 typescript ，有兩種書寫方式：

Vue.extend

??import?Vue?from?'vue'const?Component?=?Vue.extend({????//?type?inference?enabled})

Class-style Vue Components

??import?Vue?from?'vue'import?Component?from?'vue-class-component'//?The?@Component?decorator?indicates?the?class?is?a?Vue?component@Component({????//?All?component?options?are?allowed?in?heretemplate:?'<button?@click="onClick">Click!</button>'})export?default?class?MyComponent?extends?Vue?{????//?Initial?data?can?be?declared?as?instance?propertiesmessage:?string?=?'Hello!'//?Component?methods?can?be?declared?as?instance?methodsonClick?():?void?{??????window.alert(this.message)}}

理想情況下，Vue.extend 的書寫方式，是學習成本最低的。在現(xiàn)有寫法的基礎(chǔ)上，幾乎 0 成本的遷移

//?現(xiàn)在常見的寫法export?default?{????//?your?code?}

但「理想豐滿，現(xiàn)實骨感」，問題出在：

• Vue.exend 在和 vuex 和 mixins 結(jié)合使用的時候，無法發(fā)揮 ts 的作用，vuex 和 mixins 會在項目中大量使用，這個問題不能忽視。

Vue.extend + vuex + mixins 問題的介紹

Vue.extend + vuex 的問題

由于 vuex 使用 ?mapState， mapActions 等方法的時候，通過字符串形式做映射，這個過程中，丟失了類型信息。下面的 gif 可以看到，整個過程中：

• 無法做代碼提示

• 無法對對應的 actions ?和 state 做類型聲明，使得類型檢查生效

• 無法使用重構(gòu)

顯然，如果只有一部分的方法和屬性得到了代碼提示和類型檢查，就是失去了使用 typescript 意義。

在 Vue.extend + vuex 寫法下，這個問題暫時沒有解決方案。

Vue.extend + mixins 的問題

同樣的問題，在 mixin 中定義的方法，不會被 typescript 識別到，下面 gif 可以看到，不僅僅「代碼提示」「類型檢查」「代碼重構(gòu)」沒有工作，甚至因識別不到 test 而報錯

Class-Style Components

那么就剩下 Class-Style Components 方案。當然，這個方案需要做額外的工作才能夠讓「vue 全家桶 + ts」良好的工作。

原理：將屬性直接掛載在 class 上，使得 typescript 能夠良好的進行「代碼提示」和「類型檢查」。然后再通過裝飾器將屬性轉(zhuǎn)成 vue 上的屬性。

例如 @Prop, @Watch, @Action 等裝飾器，將屬性做相應的轉(zhuǎn)換成 props, ?watch, mapActions 里面的值，具體后面例子展示。

vue-class-component

這里庫提供最基礎(chǔ)的 vue 裝飾器：@Component 。其他的 vue 裝飾器庫，都在這個庫的基礎(chǔ)上做擴展和修改?？纯垂倬W(wǎng)的例子：

import?Vue?from?'vue'import?Component?from?'vue-class-component'//?@Component?會將?MyComponent?中的屬性，轉(zhuǎn)換成?vue?對應的屬性@Component({??//?Vue?所有的屬性都可以在這里聲明，一般用到的比較少template:?'<button?@click="onClick">Click!</button>'}) export?default?class?MyComponent?extends?Vue?{??//?@Component?將?message?轉(zhuǎn)成成?data?message:?string?=?'Hello!'//?@Component?會將這里的?getter?屬性，轉(zhuǎn)換成?computedget?name(){????return?'anders'}??//?@Component?識別到?created?是聲明周期關(guān)鍵字，不做處理created(){}??//?@Component?識別到?onClick?不是關(guān)鍵字，將它轉(zhuǎn)成?methods??onClick?():?void?{????window.alert(this.message)} }

vue-property-decorator

這個庫提供了：

• @Emit

• @Inject

• @Model

• @Prop

• @Provide

• @Watch

其中常用的： @Prop，@Watch，@Emit。 看例子：

import?{?Component,?Emit,?Inject,?Model,?Prop,?Provide,?Vue,?Watch?}?from?'vue-property-decorator'const?s?=?Symbol('baz')@Component export?class?MyComponent?extends?Vue?{@Emit()addToCount(n:?number){?this.count?+=?n?}@Emit('reset')resetCount(){?this.count?=?0?}@Prop()propA:?number@Prop({?default:?'default?value'?})propB:?string@Prop([String,?Boolean])propC:?string?|?boolean@Watch('child')onChildChanged(val:?string,?oldVal:?string)?{?}@Watch('person',?{?immediate:?true,?deep:?true?})onPersonChanged(val:?Person,?oldVal:?Person)?{?} }

上面的使用就相當于：

const?s?=?Symbol('baz')export?const?MyComponent?=?Vue.extend({name:?'MyComponent',props:?{checked:?Boolean,propA:?Number,propB:?{type:?String,??????default:?'default?value'},propC:?[String,?Boolean],},methods:?{addToCount(n){??????this.count?+=?n??????this.$emit("add-to-count",?n)},resetCount(){??????this.count?=?0this.$emit("reset")},onChildChanged(val,?oldVal)?{?},onPersonChanged(val,?oldVal)?{?}},watch:?{????'child':?{handler:?'onChildChanged',immediate:?false,deep:?false},????'person':?{handler:?'onPersonChanged',immediate:?true,deep:?true}} })

更加全面的用法參考文檔：vue-property-decorator

免費體驗云安全(易盾)內(nèi)容安全、驗證碼等服務(wù)

更多網(wǎng)易技術(shù)、產(chǎn)品、運營經(jīng)驗分享請點擊。

相關(guān)文章：
【推薦】?年輕設(shè)計師如何做好商業(yè)設(shè)計

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的使用 typescript ，提升 vue 项目的开发体验（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。