Here we have a function called `fetchLukeSkywalker`:

```typescript
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:

```typescript
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:

```text
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.

Almost every web application involves making API calls. But how can we tell TypeScript what to expect when we’re expecting data?

There are several solutions here.

## Do What TypeScript Suggests

In the starting point of the code, hovering over the error message in VS Code pops up a message:

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

We get this error because the `fetchLukeSkywalker` function is async, so the type returned will be a Promise.

Following TypeScript's suggestion to write `Promise<LukeSkywalker>` will fix this error:

```typescript
export const fetchLukeSkywalker = async (): Promise<LukeSkywalker> => {
```

Note that this syntax is similar to the `Array<Post>` syntax we saw earlier. But unlike arrays, there's only one way to use `Promise<T>`.

This solution works well, and is probably what I'd recommend.

## Type the Fetched Data Response

By default, the `data` returned from a fetch request will be typed as `Any`.

Even though we know from the API what our response will contain, TypeScript has no idea. That means that the `Any` type doesn't give us any autocomplete when we use it.

```typescript
export const fetchLukeSkywalker = async () => {
  // `data` will be typed as `Any`
  const data = await fetch(
```

But because we've awaited the fetch, we can type `data` as `LukeSkywalker`:

```typescript
const data: LukeSkywalker = await fetch(
```

This would give us the autocomplete because it's been properly typed.

Now when we hover over the `fetchLukeSkywalker` function declaration, we can see that TypeScript has inferred the return type of the function to be `Promise<LukeSkywalker>` just like we saw in the prior solution.

## Cast Data as a Type

In the cases we've looked at so far, we're kind of lying to ourselves a little bit.

TypeScript doesn't know what we're going to return, so we have to tell it. But really, we don't know what the result of our fetch is going to be.

This is where this solution comes in:

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

  // cast the data to LukeSkywalker
  return data as LukeSkywalker;
};
```

The `return data as LukeSkywalker` line casts the fetch response to our `LukeSkywalker` type.

When working with fetch requests, you should either cast the return data as a type or assign a type to the data when the request is made.

## More About Casting

Casting allows us to let anyone become LukeSkywalker:

```typescript
const matt = {} as LukeSkywalker
```

Compare the above to if we said `matt` was assignable to `LukeSkywalker`:

```typescript
const matt: LukeSkywalker = {}
```

This would give us errors because the object doesn't include the appropriate properties. Generally speaking, the assigning syntax is safer than the `as` syntax, and is probably what you should do in most cases.

Update Return Type Annotations for Async Functions

0:00 There are several solutions here. The first one is this. This is the one that TypeScript hints at you to do when you add this return type. The return type of an async function or method must be the global promised T type. Did you mean to write Promise Luke Skywalker? This is really cool.

0:18 It's because we've specified this as an async function. What it means is if we were to use this, if we were to say const luke equals fetch Luke Skywalker, this attribute here is not Luke Skywalker. It's going to be a promise that represents Luke Skywalker that will resolve to be Luke Skywalker. We should wrap it in promise here.

0:44 This syntax is exactly the same as the array syntax I showed you earlier. There's no other way to represent promises here. This is what we've got. It's pretty good. We got our fetch Luke Skywalker. This is the first solution and it works. This is probably what I recommend, maybe.

1:02 Let's look at the third solution first. The third solution is a little bit funky in terms of formatting. If I remove this and I say data is this, data is typed as any. Now, any is a really interesting type in TypeScript because it doesn't give you any autocomplete when you use it. Data dot blah, blah, blah, blah, I'm not getting any of my name, height, mass, hair color stuff.

1:29 This data here, because we've awaited this fetch, I can actually say this is Luke Skywalker there using the syntax that we've seen before. Now, my data is typed as Luke Skywalker, so I'll get access to data dot birth year, data dot eye color, etc.

1:47 This is one way to do it. What this means then is if I hover over fetch Luke Skywalker, suddenly, it's inferred, because it's an async function, that we return a Promise Luke Skywalker. I can also do both if I want to. I can say Promise Luke Skywalker just here, which is pretty nice, Promise Luke Skywalker.

2:08 Now, if I return a number, let's say, then it's going to yell at me because data doesn't represent the thing. You notice here that we are lying to ourselves a little bit in all of these cases because, really, we don't know what this is going to return, or TypeScript itself doesn't know it. We're having to tell it.

2:32 The third way to do this is the most out there, or at least, you may have seen this syntax before if you've come across TypeScript, which is we're saying return data as Luke Skywalker. This syntax is a cast. What this does is it's casting data to Luke Skywalker. This could actually be anything.

2:54 I could say const matt -- This was always my dream when I was a kid -- as Luke Skywalker. Now, we can say that Matt is Luke Skywalker. If I were to change this to we need to ensure that Matt is assignable to Luke Skywalker, then we actually get errors here. Type thing is missing the following, blah, blah, blah, blah, blah, blah. It's yelling at me because I've not added all of these properties.

3:26 The as is a more powerful way, a stronger way to tell TypeScript what you think things should be. Of course, because TypeScript is really clever, then the return type of this is still going to be a Promise Luke Skywalker. We're still going to need to wait it and TypeScript is still relatively happy.

3:46 I do like that this shows you the difference between this as and this syntax, just the assigning syntax. This is a bit safer. What you should probably do in all cases is this. Sometimes you'll run up against cases where this is the better option.

4:06 Here, because data is any, any is a type that's assignable to anything. It's like TypeScript has no idea what it could be, and it literally doesn't. Unless it literally goes and fetches this data, it has no idea what that data shape is going to be. That's not TypeScript's business. It's not going to do that for you. We need to tell it. We can either do it with this syntax or with this syntax here.

Typing Promises and Async Requests

0:00 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.

0:21 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.

Get hands-on interactive practice with this free TypeScript tutorial and learn the foundational knowledge and skills you need to become a TypeScript Wizard.

In this TypeScript tutorial you will:

* Learn to type variables, functions, and errors
* Become familiar with the TypeScript documentation
* Gain experience with modern TypeScript tooling

[Start now](https://totaltypescript.com/tutorials/beginners-typescript/implicit-any-type-error), and see why TypeScript’s an essential tool for modern web developers!

<Testimonial author={{name: "David Stinemetze", image: "https://cdn.sanity.io/images/z9io1e0u/production/6b24aef92c60f25c88fd8da44e97a1a47cb64e7b-150x150.png"}}>The Beginner’s course is fantastic. Very well explained, and easy to navigate through. I went through it in preparation for the <a href="https://totaltypescript.com/workshops" target="_blank" rel="noopener">extra paid workshops</a>, just to ensure I had a solid foundation and even then I learned some new things. Thanks Matt!</Testimonial>

## Instructions

This Beginner’s TypeScript tutorial is split into several exercises. Each features a `problem` that encourages you to take an active, exploratory learning approach to finding a `solution`.

To attempt a solution, you’ll need to:

1. Watch and read the `problem` introduction.
2. Check out [the TypeScript docs](https://www.typescriptlang.org/docs/).
3. Search for relevant keywords.
4. Give it a go to see if it solves the problem (there may be more than one solution!)

Whether you succeed or get stuck, watch & read the `solution` and check out the included code.

### Prerequisites

You’ll need a working understanding of JavaScript.

### Running the Exercises Locally

Clone [the Beginner’s TypeScript Tutorial repo](https://github.com/total-typescript/beginners-typescript-tutorial), and use npm or yarn to install dependencies.

If you [follow this link to use gitpod](https://gitpod.io/#https://github.com/total-typescript/beginners-typescript-tutorial), you can work in a full VS Code coding environment running in your browser.

Follow the [instructions in the README](https://github.com/total-typescript/beginners-typescript-tutorial) for more.

Free interactive video tutorial that will help you get started with TypeScript.

Beginner's TypeScript Tutorial Repo

First thing’s first: dealing with the implicit ‘any’ type error.

Fix the Implicit 'Any' Error

The Implicit ‘Any’ Type Error

Not all of the functions you write will take primitive types. When you need to pass objects as parameters, there are a few different ways to type them properly.

Add Types to Object Params

Working with Object Params

TypeScript can’t tell by itself if your code will still work when object properties are missing. For these situations, you need to specify which are optional.

Denote an Optional Property

Set Properties as Optional

Just as we saw with object properties, function parameters can be set as optional as well.

Mark a Function Parameter as Optional

Optional Parameters

Assigning types to variables allows TypeScript to provide more useful error messages on the lines where they occur.

Make a Variable Conform to an Interface

Assigning Types to Variables

TypeScript allows us to constrain a property’s value to one of a set number of things. For example, a medal that could only be gold, silver, or bronze.

Delineate Types a Value Can Be

Constraining Value Types

Arrays are one of the most common data structures in development. In this lesson, find out how they are represented in TypeScript.

Two Ways to Represent Arrays

Working with Arrays

Being strict about what is returned from your functions ensures that your code is safe on the inside as well as the outside.

Annotate a Function to Specify its Return Type

Function Return Type Annotations

One of the most crucial TypeScript concepts to understand is how type arguments work with certain functions and constructors.

Pass a Type Argument to Restrict Potential Types

Passing Type Arguments

Seeing “index” in a type error message usually refers to the key of an object. In this lesson are a few techniques for properly typing dynamic object keys.

Techniques for Typing Dynamic Object Keys

Assigning Dynamic Keys to an Object

TypeScript offers powerful features for narrowing down branches when working with third party APIs or functions that support data in different forms.

Change Function Returns Based on Type

Narrowing Down Union Types

When using a try-catch in TypeScript, it’s important that you type the error appropriately. There are a few different techniques to accomplish this.

Techniques for Coercing an Unknown Type

Typing Errors in a Try-Catch

Interfaces can inherit properties from other interfaces. This allows us to DRY out our code and have a neater way to work with complex data models.

Extend Interfaces From Other Interfaces

Inheriting Interface Properties

TypeScript allows for composing types together to create new types. This is useful when returning data that is a combination of multiple different types.

Combine Inline or at the Type Level

Combining Types to Create New Types

TypeScript provides us with tools for being more selective when creating new types based on others.

Two Techniques for Creating New Types Based on Others

Selectively Construct Types from Other Types

TypeScript supports typing functions that are passed in as arguments, including the arguments that they take.

Specify the Type of a Function

Typing Functions

TypeScript supports typing the returns from asynchronous functions– great for real world processes like fetching from databases or other third-party APIs.

Transcript

Typing Promises and Async Requests

Transcript