Dekorateur mit

Question

Ich möchte Methode hinzufügen setStatePromisified Komponente Prototyp zu reagieren, ich versuche, dies mit Dekorateure zu erreichen:

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 { 

} 

Typoskript fragt setStatePromise Methode zu implementieren: Immobilien setStatePromise ist in Art fehlt Test. Was kann ich tun, um diesen Fehler zu beheben?

Answer 1

Der Compiler beschwert sich, weil TestComponent definiert ist, um IPromisifiedComponent zu implementieren, aber es fehlt die setStatePromise Methode, die diese Schnittstelle definiert.
Die Tatsache, dass Sie diese Methode zur Laufzeit hinzufügen, ist der Dekorateur mit nicht gut genug für den Compiler, so müssen Sie es wissen lassen, dass es in Ordnung ist, und Sie wissen, was Sie tun:

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

Auch wenn Ihr Dekorateur dann keine Parameter benötigen, können Sie einfach tun:

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