[英]Using JavaScript Class Mixins with TypeScript Declaration Files
I need help using class mixins in declaration files.我需要帮助在声明文件中使用 class mixins。 Specifically, when a method is defined in a mixin, typescript is not picking it up in the mixed class body:
具体来说,当在 mixin 中定义方法时,typescript 不会在混合的 class 主体中提取它:
In my case, I am applying two mixins.就我而言,我正在应用两个 mixin。 The first mixin -
NotifyingElementMixin
- provides a method called notify
, and it's this method which is failing to apply to the mixed class body第一个 mixin -
NotifyingElementMixin
- 提供了一个名为notify
的方法,正是这种方法无法应用于混合 class 主体
export const NotifyingElementMixin = superclass =>
class NotifyingElement extends superclass {
/**
* Fires a `*-changed` event.
*
* @param {string} propName Name of the property.
* @param {any} value property value
* @protected
*/
notify(propName, value) {
this.dispatchEvent(
new CustomEvent(`${propName}-changed`, {
detail: { value },
})
);
}
};
};
export declare class NotifyingElement {
public notify(propName: string, value: any): void
}
export function NotifyingElementMixin<TBase extends typeof HTMLElement>
(superclass: TBase): TBase & NotifyingElement;
The second mixin provides other properties and methods, but for the sake of this question, I've simplified the implementation第二个mixin提供了其他属性和方法,但是为了这个问题,我简化了实现
export const ApolloQueryMixin =
superclass => class extends superclass {
data = null;
is = 'Query';
};
export declare class ApolloQuery<TCacheShape, TData, TVariables, TSubscriptionData = TData> {
data: null
is: string
}
type Constructor<T = HTMLElement> = new (...args: any[]) => T;
export function ApolloQueryMixin<TBase extends Constructor, TCacheShape, TData, TVariables>
(superclass: TBase): ApolloQuery<TCacheShape, TData, TVariables> & TBase;
Finally, I want to export a class which applies both mixins and provides it's own methods as well.最后,我想导出一个 class 应用两个 mixins 并提供它自己的方法。 This is where I run into trouble
这是我遇到麻烦的地方
class ApolloQuery extends NotifyingElementMixin(ApolloQueryMixin(HTMLElement)) {
/**
* Latest data.
*/
get data() {
return this.__data;
}
set data(value) {
this.__data = value;
this.notify('data', value);
}
// etc
}
import { ApolloQueryMixin } from "./apollo-query-mixin";
import { NotifyingElementMixin } from "./notifying-element-mixin";
export declare class ApolloQuery<TBase, TCacheShape, TData, TVariables>
extends NotifyingElementMixin(ApolloQueryMixin(HTMLElement)) {}
When I compile this, or use my IDE, I receive the error:当我编译这个或使用我的 IDE 时,我收到错误:
error TS2339: Property 'notify' does not exist on type 'ApolloQuery'.
How do I finagle typescript into picking up my inherited methods in the mixed class body?如何让 typescript 在混合 class 主体中获取我继承的方法?
Here's the mixin pattern I use, I think the key is the return constructor:这是我使用的mixin模式,我认为关键是返回构造函数:
import { LitElement, property } from "lit-element";
type Constructor = new (...args: any[]) => LitElement;
interface BeforeRenderMixin {
beforeRenderComplete: Boolean;
}
type ReturnConstructor = new (...args: any[]) => LitElement & BeforeRenderMixin;
export default function<B extends Constructor>(Base: B): B & ReturnConstructor {
class Mixin extends Base implements BeforeRenderMixin {
@property({ type: Boolean })
public beforeRenderComplete: boolean = false;
public connectedCallback() {
super.connectedCallback();
if (!this.beforeRenderComplete)
this.beforeRender().then(() => (this.beforeRenderComplete = true));
}
public async beforeRender() {
return;
}
public shouldUpdate(changedProperties: any) {
return this.beforeRenderComplete && super.shouldUpdate(changedProperties);
}
}
return Mixin;
}
which generates:生成:
import { LitElement } from "lit-element";
declare type Constructor = new (...args: any[]) => LitElement;
interface BeforeRenderMixin {
beforeRenderComplete: Boolean;
}
declare type ReturnConstructor = new (...args: any[]) => LitElement & BeforeRenderMixin;
export default function <B extends Constructor>(Base: B): B & ReturnConstructor;
export {};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.