Let's start looking at a bit more complex type declarations.

We've got a `User` type that is similar to what we've had before. We also have a new `Post` interface:

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

interface Post {
  id: number;
  title: string;
}
```

I've created a `defaultUser` that has a couple of posts added, but there's an error:

```typescript
export const defaultUser: User = {
  id: 1,
  firstName: "Matt",
  lastName: "Pocock",
  role: "admin",
  posts: [
    {
      id: 1,
      title: "How I eat so much cheese",
    },
    {
      id: 2,
      title: "Why I don't eat more vegetables",
    },
  ],
};
```

The problem is that in the `User` interface it's expecting a _single_ `Post` instead of the array that `defaultUser` has.

## Challenge

Your challenge is to fix this type error by determining how to represent arrays.

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

There are two solutions to this problem.

## Add Square Brackets

The first solution is to add a couple of square brackets to `Post`:

```typescript
// inside the User interface
posts: Post[];
```

Now if we create a `posts` consts of the type `Post[]`, we'll get autocomplete when we populate the `id` and `title` properties:

```typescript
const posts: Post[] = [
  {
    id: 1,
    title: 'autocomplete works'
  }
]
```

## Use a Generic Type

The second solution is to use a generic type.

This syntax uses the name of what we want (`Array`, in this case) followed by angle brackets with the type that will be in the array:

```typescript
// inside the User interface
posts: Array<Post>
```

The generic types are built into TypeScript without us having to import anything.

We'll be seeing more of them later when we get into Promises, Maps, and other more advanced types.

## Which one should you use?

Both options resolve to the same thing– it's just two different ways of writing it.

I like `Post[]` for arrays, but I wanted to show the generic type syntax since it comes up later.

Two Ways to Represent Arrays

0:00 There are two solutions to this problem. The first one is to add a couple of square brackets just at the end of Post here. That turns it into an array of posts. I can extract this into a type itself. I can say const posts is Post array. Now, we get to specify all the array of posts, and I get my stuff all autocompleted for me, which is really, really nice. That's the first type of syntax you can use.

0:28 There's a second type of syntax which specifies that using...This is what's called a generic type. This array type here is something I don't have to import from anywhere. It's just inside the language. If I misspell it, then I'm going to get an error there, obviously, but array just is available globally.

0:48 What I do here is I pass it the thing that I want to put in the array. It's an array of posts. This little square...Not square brackets. I can't remember the name for them, but these little braces here, whatever they're called, this syntax is very, very common in especially more advanced types. I want to point this out.

1:11 It's up to you which one you use. They resolve into exactly the same thing. It's just two different ways of expressing the same thing. I like this one, but then I wanted to teach this one because it comes up a lot later, especially with promises, especially with maps, sets, records, things like that. Do get used to this syntax. That's the main way to express arrays in TypeScript.

Working with Arrays

0:00 Let's start looking at a bit more complex type declarations here. We've got a User type, which is very similar to what we had before, firstName, lastName, role, id, and we now added some posts to that user. Each post has an id, and it has a title.

0:17 I've got my defaultUser down here, but posts is yelling at me. It's saying type blah-blah blah-blah blah is missing the following properties from type Post, id, title.

0:27 It looks like here that it's expecting a single post, so what I've said to it is...I'm pretty sure it'll be happy if I just get rid of this and put in that. Yeah, it's not yelling at me anymore.

0:38 I want it to represent an array of posts, so your problem is to basically go into the TypeScript docs, work out how you can represent arrays, and come back and fix this type error.

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

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

Working with Arrays

Transcript