Earlier we looked at a `User` that had a boolean `isAdmin` property.

But what if we had other types of roles?

We wouldn't want to use a freeform string, because there are only a set number of roles that a `User` could have: `admin`, `user`, or `super-admin`.

```typescript
interface User {
  id: number;
  firstName: string;
  lastName: string;
  /**
   * How do we ensure that role is only one of:
   * - 'admin'
   * - 'user'
   * - 'super-admin'
   */
  role: string;
}
```

Consider this `defaultUser`:

```typescript
export const defaultUser: User = {
  id: 1,
  firstName: "Matt",
  lastName: "Pocock",
  // @ts-expect-error
  role: "I_SHOULD_NOT_BE_ALLOWED",
};
```

It's being defined with a role that is not one of our options.

Note that the `// @ts-expect-error` comment tells TypeScript that we are expecting there to be an error on the next line.

If there is _not_ an error on the next line down, there will be a red squiggle under `// @ts-expect-error`. If there is an error, the line is happy and there will not be any red.

In our code's current state, we see the red line because the `"I_SHOULD_NOT_BE_ALLOWED"` is a string as the `User` interface expects, so there is no error.

## Challenge

Update the `User` interface to restrict the `role` property to one of the set options.

The `I_SHOULD_NOT_BE_ALLOWED` role should cause an error, which will remove the red squiggly line from underneath the `// @ts-expect-error` line.

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.

The solution is to update `role` to be a Union type.

The syntax uses `|` to delineate the options for which values a key can be:

```typescript
interface User {
  id: number;
  firstName: string;
  lastName: string;
  role: "admin" | "user" | "super-admin";
}
```

With this change, removing the `// @ts-expect-error` line will show us the error message along with autocomplete for the allowed options.

## About Union Types

Anything can be added to a union type. For example, we can make a new `SuperAdmin` type and add it to the role:

```typescript
type SuperAdmin = 'super-admin'

interface User {
  // ...other stuff
  role: "admin" | "user" | SuperAdmin;
}
```

In this example, an object primitive is added, and Prettier reformats the code like so:

```typescript
role:
  | "admin"
  | "user"
  | SuperAdmin
  | {
      wow: boolean;
    }
```

Union types are everywhere within TypeScript, and will be used throughout Total TypeScript.

They give your code safety and allow you to be really sure of the types of data flowing through your app.

Delineate Types a Value Can Be

0:00 Here we go. This is a union type, which means that role can either be admin, user, or super-admin. We use this syntax here to delineate which ones it can be. Now, if I remove that ts-expect-error, I'm going to get autocomplete inside this role, and I access the autocomplete by going control space. At least that's for me on a Mac using VS Code. Your mileage may vary.

0:31 We have admin, we have super-admin, or we have user. I can add other things to this, too. I can add anything to a union type. I can extract one of these two a type of itself. I can say type SuperAdmin equals super-admin, like this, and I can just put it in here. Again, it's going to give me the same behavior, so super-admin.

0:53 You can do all sorts of stuff. Object primitives can go inside here as well, so wow true, for instance, or wow boolean. You notice that when these get pretty big, they actually go into this format instead, which makes them a little bit easier to read, but is no different in terms of the behavior.

1:11 Union types are extremely powerful. We're going to use them a lot throughout the scope of total TypeScript. They allow you to do all sorts of cool stuff. Of course, I can even make this role down here into its own union type.

1:29 Really, union types are everywhere within TypeScript. They really help give your code a lot of safety and make sure that you can't pass illegal values into various places. Although, of course, they only act on the type level.

1:44 If, for instance, I wanted to somehow change this at runtime, I could do something illegal. I could say defaultUser.role equals blah, blah, blah, blah, blah. Of course, that's going to yell at me because blah, blah, blah, blah, blah is not assignable to type role. I could do something crazy like ts-ignore, for instance. That will let me pass an illegal value there.

2:06 As long as you're playing by TypeScript's rules and by not trying to override it in anyway, then union types allow you to be really sure of the types of data that are flowing through your app.

Constraining Value Types

0:00 Sometimes in TypeScript, you'll want to make sure that a property is not just like any string, but is one of a select number of strings. This might be 1 for numbers, too. You might want to make sure it's either , 1, 2 3, or 4, etc.

0:14 For this one, we have a user. We've worked out that our isAdmin Boolean that we had before is not quite cutting it, because users, they can either just be a normal user, they can be an admin, or they can be a super admin. We want to make sure that this role here is either going to be one of these specific strings.

0:36 This error down here, I_SHOULD_NOT_BE_ALLOWED, should not be allowed to be parsed here. This ts-expect-error, what this does is it checks for an error on the next line. If there is an error there, then it's not going to work. If I pass a number here, for instance, then ts-expect-error is going to be happy even though there's an error hiding underneath.

0:58 It's a little useful trick that I've used just to make sure that you see that there's supposed to be an error on the next line. Workout using the docs to see if you can restrict role to be one of those three things.

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

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

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

Constraining Value Types

Transcript