For this exercise, we'll be working with the Set data structure from JavaScript.

Here we're creating a set of guitarists and adding Jimi Hendrix and Eric Clapton to it.

```typescript
const guitarists = new Set();

guitarists.add("Jimi Hendrix");
guitarists.add("Eric Clapton");
```

We also have the `// @ts-expect-error` directive because we expect an error to be thrown we try to add a non-string to the set.

```typescript
it("Should give a type error when you try to pass a non-string", () => {
  // @ts-expect-error
  guitarists.add(2);
});
```

However, our error isn't being thrown because the `guitarists` set is not strictly typed as a set of strings.

We see this same issue when hovering over the `guitaristsAsArray` variable inside of the array test:

```typescript
const guitaristsAsArray = Array.from(guitarists);
```

Hovering shows us that `guitaristsAsArray` is an `unknown` array.

## Challenge

Your challenge is to update `guitarists` to be typed a set of strings.

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

The solution here is pretty interesting.

We can pass in a type argument to the Set to tell it what type it should be:

```typescript
const guitarists = new Set<string>();
```

When the argument is in place, we can only add items of that specific type.

This also enables useful things like hovering over `guitarists.add()` and seeing that it expects a string.

## Digging Deeper

You can pass in type arguments as well as function arguments to certain functions.

In this case since Set is a class that we're instantiating, we can command-click or right-click and say "Go to Definition".

Double-clicking takes us to a file called `lib.es2015.collection.d.ts` which is where certain parts of JavaScript are typed out.

There's an interface for Set that starts like this: 

```typescript
interface Set<T> {
```

That `T` represents the type argument.

Back in our solution code, if you erase the type argument and go back to just `Set()`, hovering over it will show you that it is typed as `Set<unknown>`.

Lots of JavaScript constructs and popular libraries use this.

## Another Example

Let's create a new Map and pass string as a type argument:

```typescript
const map = new Map<string>()
```

Now when we hover, we see the following:

```typescript
Map<any, any>
```

This is because Map accepts two type arguments: the first is the key, and the second is the value.

If we wanted to create a map where the keys and values were both strings, it would look like this:

```typescript
const map = new Map<string, string>()

map.set('someKey', 'someValue')
```

Changing `someKey` to a number would now give us an error.

This concept of passing type arguments to certain functions and constructors and classes is crucial for understanding TypeScript as a whole!

Pass a Type Argument to Restrict Potential Types

0:00 The solution here is pretty interesting. You can pass in a type argument to the set to tell it what type it should be. If we remove this, then guitarists gets put to set unknown. Whereas if we add it back, we end up with set string here. That means that you can't add anything that isn't a string in there. You can't add a Boolean.

0:26 Even when you hover over guitarists.add, it's going to tell you that the add there is a value string. This is really cool. This concept is like you can pass in type arguments, as well as function arguments to certain functions. In this case, this is a class actually that we're instantiating.

0:46 What you can do is command-click or right-click there and say, "Go to definition." Then, if you double-click inside there, you can see that we're now in this crazy file called lib.es2015.collection.d.ts. This is where the types for certain parts of JavaScript are actually typed out. You can see that we have interface set here. We're going to dive deeper on this in a future episode.

1:12 What you see here is that there's this T here which represents the type argument. If I don't want to dive deep into there, and I wouldn't blame you, then you can hover over this and you can see that it's typed as unknown here by default. If you don't pass anything, it's going to be typed as unknown.

1:29 This little thing, when you hover over something like this, you'll be able to see if there's a type argument that you can pass there. We can pass in number here if we want to, and that would mean the add 2 is correct, or we can pass in a string. Lots of different constructs in Java Script or in libraries that you might use use this.

1:47 If you want to say const map equals new Map, and we can say that it's a string. This one actually accepts two type arguments, which is the first one is the key and the second one is the value. If we wanted to create a map where the keys were strings and the values were strings, then we would say map.set, and we'd have to pass in a string and then we pass in a value there.

2:12 If we change that to a number, then that is going to error here. This concept that you can pass in type arguments to certain functions and certain constructors and classes is really crucial for understanding TypeScript as a whole.

Passing Type Arguments

0:00 Hello. I've changed my t-shirt. Now, we have a problem here which is to do with this set here. We are adding guitarists to this set. We're adding Jimi Hendrix to it and Eric Clapton. This set, by the way, if you've never seen it before, it's nothing to do with TypeScript. This is actually a JavaScript thing. We're expecting that guitarists should contain Jimi Hendrix and Eric Clapton, which they do.

0:23 We're also expecting an error to throw here when you add a non-string to that set. If I remove this, then this should be erroring here, but it's not. For some reason, our set isn't being strictly typed as a set of strings. We've got it here, too, "Should be typed as an array of strings."

0:45 When we get our guitaristsAsArray here, when we call Array.from guitarists, then it should be returning a type which is a string array, but it's not. It's saying it's unknown array. Your challenge is to figure out -- I'll give you a clue, it's on this line -- how to type this set as a set of strings and not just what it is now, which is a set unknown.

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

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

Passing Type Arguments

Transcript