此文已由作者張漢銳授權網易云社區發布。
歡迎訪問網易云社區，了解更多網易技術產品運營經驗。
前言：對于我們而言，typescript 更像一個工具
官方指南
從 vue2.5 之后，vue 對 ts 有更好的支持。根據官方文檔，vue 結合 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 的書寫方式，是學習成本最低的。在現有寫法的基礎上，幾乎 0 成本的遷移
//?現在常見的寫法export?default?{????//?your?code?}但「理想豐滿，現實骨感」，問題出在：
Vue.exend 在和 vuex 和 mixins 結合使用的時候，無法發揮 ts 的作用，vuex 和 mixins 會在項目中大量使用，這個問題不能忽視。
Vue.extend + vuex + mixins 問題的介紹
Vue.extend + vuex 的問題
由于 vuex 使用 ?mapState， mapActions 等方法的時候，通過字符串形式做映射，這個過程中，丟失了類型信息。下面的 gif 可以看到，整個過程中：
無法做代碼提示
無法對對應的 actions ?和 state 做類型聲明，使得類型檢查生效
無法使用重構
顯然，如果只有一部分的方法和屬性得到了代碼提示和類型檢查，就是失去了使用 typescript 意義。
在 Vue.extend + vuex 寫法下，這個問題暫時沒有解決方案。
Vue.extend + mixins 的問題
同樣的問題，在 mixin 中定義的方法，不會被 typescript 識別到，下面 gif 可以看到，不僅僅「代碼提示」「類型檢查」「代碼重構」沒有工作，甚至因識別不到 test 而報錯
Class-Style Components
那么就剩下 Class-Style Components 方案。當然，這個方案需要做額外的工作才能夠讓「vue 全家桶 + ts」良好的工作。
原理：將屬性直接掛載在 class 上，使得 typescript 能夠良好的進行「代碼提示」和「類型檢查」。然后再通過裝飾器將屬性轉成 vue 上的屬性。
例如 @Prop, @Watch, @Action 等裝飾器，將屬性做相應的轉換成 props, ?watch, mapActions 里面的值，具體后面例子展示。
vue-class-component
這里庫提供最基礎的 vue 裝飾器：@Component 。其他的 vue 裝飾器庫，都在這個庫的基礎上做擴展和修改。看看官網的例子：
import?Vue?from?'vue'import?Component?from?'vue-class-component'//?@Component?會將?MyComponent?中的屬性，轉換成?vue?對應的屬性@Component({??//?Vue?所有的屬性都可以在這里聲明，一般用到的比較少template:?'<button?@click="onClick">Click!</button>'})
export?default?class?MyComponent?extends?Vue?{??//?@Component?將?message?轉成成?data?message:?string?=?'Hello!'//?@Component?會將這里的?getter?屬性，轉換成?computedget?name(){????return?'anders'}??//?@Component?識別到?created?是聲明周期關鍵字，不做處理created(){}??//?@Component?識別到?onClick?不是關鍵字，將它轉成?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
免費體驗云安全(易盾)內容安全、驗證碼等服務
更多網易技術、產品、運營經驗分享請點擊。
相關文章：
【推薦】?年輕設計師如何做好商業設計
