使用裝飾器擴展原型

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 {

}

打字稿要求實施setStatePromise方法：類型Test缺少屬性setStatePromise 。 我該如何解決該錯誤？

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>;
}