在 Typescript 中使用可被复用的 Vue Mixin功能
转到用 Typescript 写 Vue 应用以后,经过一轮工具链和依赖的洗礼,总算蹒跚地能走起来了,不过有一个很常用的功能 mixin,似乎还没有官方的解决方案。 既想享受 mixin 的灵活和方便,又想收获 ts 的类型系统带来的安全保障和开发时使用 IntelliSense 的顺滑体验。 vuejs 官方组织里有一个 也不是什么复杂的事,自己写一个吧。 后注:vue-class-component 6.2.0 开始提供 mixins 方法,和本文的实现思路相似。 实现 = {
new(): T
} & Pick
声明 VClass (c: VClass
至于 ABC 这个纯粹是类型声明的体力活了。 使用实际使用时: {
d.dispose()
})
delete this._disposables
}
registerDisposable(d: IDisposable) {
this._disposables.push(d)
}
}
@Component({
template: `
{{ title }}Counted: {{ counter }} this.registerDisposable({ 注意到直接 extends Vue 的 DisposableMixin 并不是一个有效的 Vue 组件,也不可以直接在 mixins 选项里使用,如果要被以 Vue.extend 方式扩展的自定义组件使用,记住使用 Component 包装一层。 Abstract class 在业务系统中会使用到的 Mixin 其实多数情况下会更复杂,提供一些基础功能,但有些部分需要留给继承者自行实现,这个时候使用抽象类就很合适。 但抽象类是无法被实例化的,并不满足 这时候只好将实现了的功能写入 Mixin 中,待实现的功能放到接口里,让具体类来实现。 这种欺骗编译器的方式其实还是比较拙劣的,如果一个具体类继承了 PlayerMixin,却没有显示声明实现 IPlayerImplementation ,编译器无法告诉你这个错误。我们只能在代码里小心翼翼写上注释,期待使用者不要忘了这件事。 总结以上所述是小编给大家介绍的在 Typescript 中使用可被复用的 Vue Mixin功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |