Consider this function:

```typescript
const coerceAmount = (amount: number | { amount: number }) => {};
```

What this is saying is that what we pass into `coerceAmount` can be either a number or an object that contains an `amount`.

## Challenge

Your challenge is to write the function so that the tests pass.

There will be some little type errors along the way, but this is an interesting problem to solve.

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

For this solution, we'll start with getting the tests to pass and then work on the types.

Inside of the `coerceAmount` function we can check if `amount.amount` exists, then return it. Otherwise, return `amount`:



```typescript
const coerceAmount = (amount: number | { amount: number }) => {
  if (amount.amount) {
    return amount.amount;
  }
  return amount;
};
```



Now our tests will pass, but TypeScript gives us an error.

Hovering over `amount.amount` tells us:

`Property 'amount' does not exist on type number.`

This is a TypeScript quirk where you can't access a property unless you know it's there.

## Check Amount's Type

One way to fix the type error is updating our `if` to check if the `typeof` amount is an object. If so, return `amount.amount` otherwise just return `amount`.

```typescript
const coerceAmount = (amount: number | { amount: number }) => {
  if (typeof amount === 'object') {
    return amount.amount;
  }
  return amount;
};
```

This would also work by checking if `typeof` amount is number, then return the amount. Otherwise, return `amount.amount`:

```typescript
const coerceAmount = (amount: number | { amount: number }) => {
  if (typeof amount === 'number') {
    return amount;
  }
  return amount.amount;
};
```

Using the `typeof` operator to narrow down different branches of a union type is really powerful technique.

It's also really useful when interfacing with APIs that you didn't create.

Change Function Returns Based on Type

0:00 For this one, I'm actually going to try and fixing it live so I can show you the problems that you might have run into. CoerceAmounts. Let's just try and get the test passing first. We can say if amount.amount, which represents our object, then we can return amount.amount, otherwise return amount. Are you sick of seeing the word amount yet?

0:22 Now our tests are passing, but our types are not passing. Because amounts here it's saying property amount does not exist on type number or amount number. This is a funny little quirk of TypeScript, which is you can't access a property unless you know it's there. It's going to be strict with you on that.

0:44 What that means that you should do is we need to write this in reverse. We need to check for the number here and then return the object in the second branch. You can do this with...Matter of fact, we can do it this way too. You can do this with typeof.

1:00 Now typeof, if typeof amount === "object", then what we can do is it then knows which branch of this union it's looking at. It's saying if typeof amount === "object", then we know that it's this one. Because if we ran typeof, and it was in this branch, then it would return number. Actually that means that you can hover over this and it will show you that amount.

1:28 Whereas down here, it's now typed as amount number. You can do this in reverse too, which is what I did for the solution. If typeof amount === "number", then return amount, There. This typeof operator, the idea that you can narrow TypeScript down and get it to understand two different branches of a union just with a typeof, is really powerful.

1:49 It's really powerful for interfacing with APIs that you didn't create as well.

Narrowing Down Union Types

0:00 This challenge has a runtime element and a type element. What we've got here is we're saying this coerce amounts thing here, it's saying amount can either be a number or an object containing amounts. That means we can call it with either this here, coerce amounts, or just with a 20 there.

0:20 The tests are failing, because it's expecting coerce amount 20 to equal 20, and it's expecting coerce amount, amount 20, to also equal 20. Your job here is to write this function and try and figure out how to work around TypeScript here. You're going to run into some little type errors, and it's going to be interesting, I think, to work out how you handle it.

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

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

Update Return Type Annotations for Async Functions

Typing Promises and Async Requests

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

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

Narrowing Down Union Types

Challenge

Transcript