js fetch with TS, is not assignable

March 1, 2022

Why I get this warning in TS ?

Type 'unknown' is not assignable to type 'PokemonList'.ts(2322)

This error is on line: "return e"

Code:


export interface PokemonList {
  count: number;
  next: string;
  previous?: any;
  results: {
    name: string;
    url: string;
  }[]
};


const PokeApi = async (): Promise<PokemonList> => {
  try {
    const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');
    return res.json()
  } catch(e) {
    return e;
  }
};

If I make this:

( Promise<PokemonList> | unknown )

then I get this error:

The return type of an async function or method must be the global Promise<T> type. Did you mean to write 'Promise<unknown>'?ts(

>Solution :

The return type of that function is

Promise<PokemonList | Error>

As Keith said, this is "Not a good idea, doing this you have now broken your promise chain.". Promises have .catch and work in try/catch to chain Promises together. What you have you require an if(/else) check, which is not what Promises are meant for.

To fix this, you should remove the try/catch block inside the function and just handle errors with catch whenever you call it.

const PokeApi = async (): Promise<PokemonList> => {
  const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');
  return res.json()
};

// when calling it inside async function

let pokemonList: PokemonList;
try {
  pokemonList = await PokeApi();
} catch (e) {
  // Handle error
}