Beginner's TypeScript Tutorial (18 exercises)
Problem

Typing Promises and Async Requests

Here we have a function called fetchLukeSkywalker:

export const fetchLukeSkywalker = async (): LukeSkywalker => {
  const data = await fetch("<https://swapi.dev/api/people/1>").then((res) => {
    return res.json();
  });

  return data;
};

It goes to the Star Wars API at swapi.dev and fetches people/1, which happens to correspond to Luke Skywalker.

There's a LukeSkywalker type that includes properties based on what the API includes in the response:

interface LukeSkywalker {
  name: string;
  height: string;
  mass: string;
  hair_color: string;
  skin_color: string;
  eye_color: string;
  birth_year: string;
  gender: string;
}

However, TypeScript is showing us an error on the return type:

Type 'LukeSkywalker' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.

Challenge

Your challenge is to figure out how to update the return type annotations to make TypeScript happy.

Code

logo-github

beginners-typescript-tutorial

/src/09-promises.problem.ts

Transcript

We've got a function here called fetchLukeSkywalker. What it does is it goes an API called swapi.dev/API and fetches people/1. I happen to know, because I've looked at their documentation. What I've done is I've said, "OK, that's gonna fetch LukeSkywalker." He has a name attribute, a height attribute, a mass attribute.

When I run res.json here, it's going to return me LukeSkywalker. That data attribute is going to be typed as LukeSkywalker, but it's yelling at me here because the return type of an async functional method must be called blah-blah-blah. Who knows what that means. What your challenge is is to go through and work out how I can change the type annotations here to make sure that TypeScript is happy with me.