Using TypeScript, the fetch function cannot be assigned

Question

Using TypeScript, the fetch function cannot be assigned

Why am I encountering this TS warning?

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

This issue is on line: "return e"

Here is the code snippet:


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;
  }
};

After making this change:

( Promise<PokemonList> | unknown )

I receive this new error message:

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

javascript typescript react-native

Answer 1

Answer №1

The output type of that function is

Promise<PokemonList | Error>

Keith pointed out that this approach is not ideal as it breaks the promise chain. Promises are designed to be chained using .catch and try/catch, but your implementation requires an if/else statement, which goes against the principles of Promises.

To resolve this issue, you should eliminate the try/catch block within the function and handle errors with catch when calling it.

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

// example of calling the function inside an async function

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

Answer 2

The output type of that function is

Promise<PokemonList | Error>

Keith pointed out that this approach is not ideal as it breaks the promise chain. Promises are designed to be chained using .catch and try/catch, but your implementation requires an if/else statement, which goes against the principles of Promises.

To resolve this issue, you should eliminate the try/catch block within the function and handle errors with catch when calling it.

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

// example of calling the function inside an async function

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

Using TypeScript, the fetch function cannot be assigned

Answer №1

Similar questions

React Dependency Error

Is your HighCharts navigator and range scale malfunctioning?

The order of key:value pairs in documents created by Mongoose does not always align with the schema

Is it possible to limit the items in a TypeScript array to only accept shared IDs with items in another array?

Issue with Masonry.js implementation causing layout to not display correctly

Using Props to Render Polylines on Google Maps Display

Setting up the propTypes for interface in React TypeScript

React - Ensure useEffect is triggered only after state update

leveraging a Nuxt plugin and saving it in middleware

Angular 17: Issue with _HttpClient Provider Not Found in Standalone Component Utilizing ApiService

The successful loading of tab favicons in the DOM of an angular chrome extension is a triumph, however, explicit XHR requests are unfortunately

Can you explain the distinction between using "require" to return a module and accessing the actual object in node.js?

Ways to access the scrollTop attribute during active user scrolling

Tips for avoiding duplicate elements in ASP.NET during postback

Customizing the default settings of a d3 funnel chart

Numerical values are not considered by the JavaScript table filter

How to display an array with JSON objects in Angular 4

Is it advantageous to combine socket.io with express for seamless communication in web applications? If the answer is yes, what is the best approach to integrating

Implementing a rate limit on the login API that is specific to individual IP addresses rather than being

Learn how to easily copy the success result from an Ajax call to your clipboard