React：Typescript/Javascript 接口作为回调并访问 state

Question

as a former Java Engineer I'm struggling to have an interface as callback in Typescript/Javascript.

I'm having a "worker" class where I call doWork(..., myWorkerCallback) The callback consists of different callback methods.

interface WorkerCallback {
    onWorkDone() : void
    onError(message: String) : void
    ...
}

In my calling component I'd have a member that implements that Callback-Interface.

myWorkerCallback: WorkerCallback = {
    onWorkDone() {
    ...
    }
}

now I need to access the state of the React component inside these callback methods. So I need to bind this callback member, right? But how to bind this interface member

Answer 1

I am not sure about react-native but typical way to bind something to function is to use closures:

interface IWorkerCallback {
    onWorkDone(): void;
    onError(message: string): void;
    // ...
}

// Option 1: using object literals
function makeWorkerCallback(state: SomeState): IWorkerCallback  {
    return {
        onWorkDone: () => {
            state.update();
        },
        onError: () => { }
    }
}

// Option 2: using classes
class WorkerCallback implements IWorkerCallback {
    state: SomeState;

    constructor(state: SomeState) {
        this.state = state;
    }

    onWorkDone() {
        this.state.update();
    }

    onError(message: string) { }
}

// Usage example
const myWorkerCallback1 = makeWorkerCallback(state1);
const myWorkerCallback2 = makeWorkerCallback(state2);

const myWorkerCallback3 = new WorkerCallback(state3);
const myWorkerCallback4 = new WorkerCallback(state3);

Though at this point these objects are not callbacks. They are more. I would rename them "FooBarHandler" or something.