使用装饰器扩展原型

Question

我想添加方法 setStatePromisified 来响应组件的原型，我正在尝试使用装饰器实现此目的：

interface IPromisifiedComponent {
    setStatePromise: (state) => Promise<void>
}

interface IPromisifiedComponentConstructor {
    new (...args): IPromisifiedComponent;
    readonly prototype: IPromisifiedComponent;
}

function promisifiedDecorator() {
    return function (Component: IPromisifiedComponentConstructor) {
        Component.prototype.setStatePromise = (state) => {
            return new Promise<void>((resolve) => {
                this.setState(state, () => {
                    resolve();
                });
            });
        };
    }
}

@promisifiedDecorator()
class TestComponent extends React.Component<any, any> implements IPromisifiedComponent {

}

Typescript 要求实现 setStatePromise 方法：属性 setStatePromise 在类型 Test 中缺失。我该怎么做才能修复此错误？

Answer 1

编译器报错，因为 TestComponent 被定义为实现 IPromisifiedComponent 但它缺少此接口定义的 setStatePromise 方法。
事实上，你在运行时使用装饰器添加这个方法对编译器来说不够好，所以你需要让它知道它没问题并且你知道你在做什么：

@promisifiedDecorator()
class TestComponent extends React.Component<any, any> implements IPromisifiedComponent {
    setStatePromise: (state: any) => Promise<void>;
}

此外，如果您的装饰器不需要任何参数，那么您可以简单地执行以下操作：

function promisifiedDecorator(Component: IPromisifiedComponentConstructor) {
    Component.prototype.setStatePromise = (state) => {
        return new Promise<void>((resolve) => {
            this.setState(state, () => {
                resolve();
            });
        });
    };
}

@promisifiedDecorator
class TestComponent extends React.Component<any, any> implements IPromisifiedComponent {
    setStatePromise: (state: any) => Promise<void>;
}

使用装饰器扩展原型

Extend prototype using decorator

javascript

decorator

typescript

reactjs