Redux-saga + Typescript: implementing typeguard for Axios AJAX requests

redux-saga-typeguard.ts

import { AxiosResponse } from "axios";

// the kind of data I expect from the AJAX request...
interface AuthData {
  access_token?: string;
  refresh_token?: string;
}
// ... a type dedicated to the Axios response...
type AuthResponse = AxiosResponse<AuthData>;

// ... and the function that consumes Axios... (it's a part of my own function but the rest of the
// body isn't helpful for the sake of the Gist)
function postRefresh(refreshToken: string): Promise<AuthResponse> {
  return new Promise(async (resolve) => {    
    const response: AuthResponse = response = await Axios.post(/* ... */);
    resolve(response);
  });
}

// the saga that consumes the AJAX request
function* UNSAFE_refreshAuthSaga() {
  // ...
  
  // Typescript can't check the return type of yielded value. If 'postRefresh' returns a different 
  // type of response Typescript can't check it and compiles without errors
  const response: AuthResponse = yield call(postRefresh, "the_refresh_token");
  
  // ...
}


function* SAFE_refreshAuthSaga() {
  // ...
  
  // That's a strong typeguard check, useful to work around the Typescript impossibility of checking
  // a yielded function return value
  // tslint:disable-next-line
  let typeguard: Equals<Promise<AuthResponse>, ReturnType<typeof postRefresh>>;
  const response: PromiseArgType<typeof typeguard> = yield call(postRefresh, "the_refresh_token");

  // now if I change the return type of the "postRefresh" function Typescript raises an error

  // ...
}



// some more Typescript utilities
type Equals<A, B> = [A] extends [B] ? ([B] extends [A] ? A : never) : never;

// @see https://stackoverflow.com/questions/48011353/how-to-unwrap-type-of-a-promise?rq=1
type PromiseArgType<T> = T extends Promise<infer U>
  ? U
  : T extends (...args: any[]) => Promise<infer UU>
  ? UU
  : T;

Thansk, thats very usefull.

Above my implementaton using SagaReturnType, i think this is little bit simple:

import {
  login as loginService,
} from '@core/services/apis'


....
Some Code
....


type LoginServiceResponse = SagaReturnType<typeof loginService>

export function* login(action: Effect){
  try {
    const { username, password } = action.payload.data
    const result : LoginServiceResponse = yield call(loginService, username, password)


....
rest of code...

Thanks, I didn't know SagaReturnType! ❤️

Hey, i created a post with this solution, follow the link if you are interested.

https://dev.to/heroneto/how-to-configure-redux-saga-call-return-type-definitions-from-promisses-in-reactjs-or-react-native-apps-19d4

Thanks! Just a suggestion: in dev.to, instead of adding code comments through a triple backtick

```
const a = 1
```

suffix the opening backticks with the language (js or ts in your case)

```ts
const a = 1
```

to leverage code highlight 😉

The result is something like

const a = 1

instead of

const a = 1