Using Redux Sagas with Typescript 4.2 & above

[yaldram]

Description

We just updated typescript to typescript version 4.2 and we are getting a lot of errors. I read these following resources but these were very basic -

• https://vhudyma-blog.eu/yield-expression-implicitly-results-in-an-any-type-because-its-containing-generator-lacks-a-return-type-annotation/
• https://tech.lalilo.com/redux-saga-and-typescript-doing-it-right
• https://stackoverflow.com/questions/68985096/typescript-does-not-infer-promise-type-when-using-yield-in-a-generator-function

I need some help from the community how should I type a saga with multiple yield calls like in the below file

• https://github.com/appsmithorg/appsmith/blob/release/app/client/src/sagas/EvaluationsSaga.ts on line 95 function *evaluateTreeSaga(), it contains multiple yield calls.
• Another Example https://github.com/appsmithorg/appsmith/blob/release/app/client/src/sagas/ErrorSagas.tsx on line 42 we have function * callApi saga.

Please help, thanks a lot.

[JabbyPanda]

You can try out typed-redux-saga that will provide better Typescript typings for redux-saga

[neurosnap]

https://github.com/appsmithorg/appsmith/blob/release/app/client/src/sagas/EvaluationsSaga.ts on line 95 function *evaluateTreeSaga(), it contains multiple yield calls.

Typing multiple yield with different values is an inherent limitation with typescript and generators.

There is an outstanding issue discussing this in-depth: microsoft/TypeScript#43632

Typing redux-saga generators will at best help suppress compiler errors.

For all those yield select I would just cast the values you want.

const allActionValidationConfig: TheExpectedValue = yield select(getAllActionValidationConfig);

For the generator return type, there is a redux-saga type that I use:

import { SagaIterator } from 'redux-saga';

// where RT is the return type
function* evaluateTreeSaga(): SagaIterator<RT> {
  // ...
}

[yaldram]

Thanks a lot for your time and inputs @neurosnap @JabbyPanda. I did use the SagaIterator type, but at the end we need to type the yield statements -

function *validateResponse(): SagaIterator<boolean>{}

// It throws an error saying yield returns any
const isValidResponse = yield validateResponse();

// I need to do the following
const isValidResponse: boolean = yield validateResponse();

Not that important but I had to type :boolean everywhere.

[neurosnap]

If you have anymore follow up questions, please feel free to ask!

[kirgy]

Sorry to ressurect this issue @neurosnap, but I have the same problem @yaldram mentioned.

Using this as the return type of the saga:
SagaIterator<PasswordGrantToken>

Appears to have no effect on the return type from the caller:

// below is an `any` type
const newPasswordGrantToken = yield call(requireNewPasswordGrantToken);

See below for typescript error. I'm using redux-saga version 1.1.3 with typescript version 4.6.3

[yaldram]

@kirgy yes you have to manually type the yields unfortunately. We are doing the same in our code base.

[neurosnap]

That's right. Also, that error in particular is being raised because the saga that requireNewPasswordGrantToken is in needs the SagaIterator<any> return type.