How to repair a 'TS2769: No overload matches this call'

Question

After package updates, I suddenly get weird typescript errors:

[tsl] ERROR in C:..\UI\src\sagas.ts(40,21) TS2769: No overload matches this call.

The last overload gave the following error. Argument of type '"LOAD_IDS"' is not assignable to parameter of type 'TakeableChannel'.

The corresponding lines 39-41 of sagas.ts are

function* watchIds() {
    yield takeEvery(Actions.LOAD_IDS, loadIds);
}

The function function* loadIds({ forceReload }) is defined in the same sagas.ts and just the API call.

What does the TS error mean and how do I fix it?

1. My packages.json look like this: https://pastebin.com/raw/nJ0cPNXb

2. Maybe also important: My webpack.config.js is https://pastebin.com/raw/JNdXTCMb

References

• No overload matches this call. Type 'string' is not assignable to type 'Signals'
• https://engineering.datorama.com/demystifying-function-overloading-in-typescript-eb9f8ca6b87d

Solution 1

My colleague eventually taught me a workaround:

1. Exclude the corresponding action, e.g. takeEvery from the original import statement.
2. Import all action with as Eff where Eff is an alias.
3. Define a new constant with the same name as the original action.

import { put, fork, select, call } from 'redux-saga/effects' // <-- modified
import * as Eff from 'redux-saga/effects'  // <-- new

// ... 

const takeEvery: any = Eff.takeEvery;      // <-- new
const takeLatest: any = Eff.takeLatest;    // <-- new

As far as I understand him, the idea is to explicity allow any type.

Edit: I am aware that Facebook (as developer of React) does explicitly state that one should not use inheritance, see https://reactjs.org/docs/composition-vs-inheritance.html

Solution 2

I also met this problem, but I asked my colleague and learned about the following solution:

redux-saga takes TakeableChannel<unknown>. This is an action, so you declare type of loadIds's argument is shape of action like this:

function* loadIds({
   forceReload
}: { 
   type: string;
   forceReload: any; // your forceReload type
}) {
   // your code
}