如何为 class 创建实用程序
How to create a util for the class
我做了什么
我最初的方法是使用 returns 一个 class 装饰器的以下混合:
function createMixin (behaviour: any, sharedBehaviour: any = {}): any {
const instanceKeys: any = Reflect.ownKeys(behaviour)
const sharedKeys: any = Reflect.ownKeys(sharedBehaviour)
const typeTag = Symbol(`isa`)
function _mixin (clazz: Function): Function {
for (let property of instanceKeys) {
Object.defineProperty(clazz.prototype, property, {
value: behaviour[property],
writable: true
})
}
Object.defineProperty(clazz.prototype, typeTag, { value: true })
return clazz
}
for (let property of sharedKeys) {
Object.defineProperty(_mixin, property, {
value: sharedBehaviour[property],
enumerable: sharedBehaviour.propertyIsEnumerable(property)
})
}
Object.defineProperty(_mixin, Symbol.hasInstance, {
value: (i: any) => !!i[typeTag]
})
return _mixin
}
export const customUtil = createMixin({
customUtil (event: any) {
console.log(this)
}
})
所以稍后可以使用 util 来修饰 class 并且可以毫无问题地访问目标 class 的 this:
import { customUtil } from 'utils'
@customUtil
export default class ComponentClass extends Vue {
someClassMethod() {
this.customUtil() // successfully outputs the whole class in the console
}
}
但是 它会导致 tslinter 警告 TS2339: Property 'customUtil' does not exist on type 'ComponentClass'.
问题
1. 是否有可能通过某种方式 "typing" 由 mixin 实用程序
分配给 class 的方法来解决 linter 问题
2. 如果有另一种方法可以使实用程序 functions/classes 可以毫无问题地访问 class 中的此内容,并且可以通过简单的方式附加它们?
此问题已在 and is also a pending issue in the TypeScript github 中讨论。但是有两种方法可以解决这个问题。
1:类型转换
您可以直接强制转换 this
以忘记 class 上下文或使用必要的信息增强它。
import { customUtil } from 'utils'
@customUtil
export default class ComponentClass extends Vue {
someClassMethod() {
(this as any).customUtil(); // Now the linter will be fine but you will lose type safety
(this as any as {customUtil: (event:any) => void}).customUtil(); // This works and you could/should extract the type.
}
}
但是如您所见,这并不理想。
2:真正的 TypeScript Mixins
您可以使用真正的 TypeScript Mixins 代替装饰器:
工具
type Constructor<T = {}> = new (...args: any[]) => T;
// The Mixin
export function WithUtils<TBase extends Constructor>(Base: TBase) {
return class extends Base {
customUtil (event?: any) { // Actually, 'event' needs to be optional
console.log(this)
}
};
}
// A Base class so you can just extend if needed
export const UtilsBase = WithUtils(class {});
组件
export default class ComponentClass extends WithUtils(Vue) {
someClassMethod() {
this.customUtil() // successfully outputs the whole class in the console
}
}
Class 未从 Vue 扩展
export default class SomeClass extends UtilsBase {
someClassMethod() {
this.customUtil() // successfully outputs the whole class in the console
}
}
// alternatively, you can use the Mixin with an unnamed class
export default class SomeClass extends WithUtils(class {}) {
someClassMethod() {
this.customUtil() // successfully outputs the whole class in the console
}
}
我做了什么
我最初的方法是使用 returns 一个 class 装饰器的以下混合:
function createMixin (behaviour: any, sharedBehaviour: any = {}): any {
const instanceKeys: any = Reflect.ownKeys(behaviour)
const sharedKeys: any = Reflect.ownKeys(sharedBehaviour)
const typeTag = Symbol(`isa`)
function _mixin (clazz: Function): Function {
for (let property of instanceKeys) {
Object.defineProperty(clazz.prototype, property, {
value: behaviour[property],
writable: true
})
}
Object.defineProperty(clazz.prototype, typeTag, { value: true })
return clazz
}
for (let property of sharedKeys) {
Object.defineProperty(_mixin, property, {
value: sharedBehaviour[property],
enumerable: sharedBehaviour.propertyIsEnumerable(property)
})
}
Object.defineProperty(_mixin, Symbol.hasInstance, {
value: (i: any) => !!i[typeTag]
})
return _mixin
}
export const customUtil = createMixin({
customUtil (event: any) {
console.log(this)
}
})
所以稍后可以使用 util 来修饰 class 并且可以毫无问题地访问目标 class 的 this:
import { customUtil } from 'utils'
@customUtil
export default class ComponentClass extends Vue {
someClassMethod() {
this.customUtil() // successfully outputs the whole class in the console
}
}
但是 它会导致 tslinter 警告 TS2339: Property 'customUtil' does not exist on type 'ComponentClass'.
问题
1. 是否有可能通过某种方式 "typing" 由 mixin 实用程序
分配给 class 的方法来解决 linter 问题
2. 如果有另一种方法可以使实用程序 functions/classes 可以毫无问题地访问 class 中的此内容,并且可以通过简单的方式附加它们?
此问题已在
1:类型转换
您可以直接强制转换 this
以忘记 class 上下文或使用必要的信息增强它。
import { customUtil } from 'utils'
@customUtil
export default class ComponentClass extends Vue {
someClassMethod() {
(this as any).customUtil(); // Now the linter will be fine but you will lose type safety
(this as any as {customUtil: (event:any) => void}).customUtil(); // This works and you could/should extract the type.
}
}
但是如您所见,这并不理想。
2:真正的 TypeScript Mixins
您可以使用真正的 TypeScript Mixins 代替装饰器:
工具
type Constructor<T = {}> = new (...args: any[]) => T;
// The Mixin
export function WithUtils<TBase extends Constructor>(Base: TBase) {
return class extends Base {
customUtil (event?: any) { // Actually, 'event' needs to be optional
console.log(this)
}
};
}
// A Base class so you can just extend if needed
export const UtilsBase = WithUtils(class {});
组件
export default class ComponentClass extends WithUtils(Vue) {
someClassMethod() {
this.customUtil() // successfully outputs the whole class in the console
}
}
Class 未从 Vue 扩展
export default class SomeClass extends UtilsBase {
someClassMethod() {
this.customUtil() // successfully outputs the whole class in the console
}
}
// alternatively, you can use the Mixin with an unnamed class
export default class SomeClass extends WithUtils(class {}) {
someClassMethod() {
this.customUtil() // successfully outputs the whole class in the console
}
}