We've got an empty object that we're calling 

, and we're allowing users to specify add and remove on it.

Hovering over the errors makes it look like cache has been typed as an empty object.

There is no indexing happening with our current code..

Your challenge is to reference the TypeScript docs and work out what could be causing this problem.

 to be typed properly so the errors go away.

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.

This is another challenge with multiple solutions.

 is for the key, and the second is for the value. In our case, both are strings.

The Record type allows us to add any number of dynamic keys to the object at runtime, using something like this:

Record is different than the Set and Map we looked at earlier– it is only at the type level.

Recall that in the "before" code we had lots of errors like 

These errors were saying that they couldn't tell what types the key was. Whenever you see an error about an index, it's usually about an object key!

For this fix, we'll add what is called an index signature to our 

Index signatures put the name of the index and its type (string or number) inside of square brackets.

 we would have to pass a number as the first argument.

All of these solutions are fine-- there's no pros or cons between them.

 syntax is a bit easier to look at and parse what it's doing. It also displays helpful information when you hover over it.

Assigning dynamic keys to an object is a common pattern in JavaScript, and these techniques allow you to do it.

Techniques for Typing Dynamic Object Keys

 This problem has multiple solutions. We've got a type here which I've added to this cache here. What that appears to be doing is it appears to be allowing us to save anything on that cache. We can do anything here. We can say cache dot blah, blah, blah, blah, blah equals something cool here.

 What it's allowing us to do is then access things off that cache later, too. We can do cache.cache 23 to equal undefined. This type here, what that's describing is, basically, it allows us to add any number of dynamic keys to that object at runtime. That's what a record type is.

 This is different from a set and a map that we saw in the previous exercise, because it's just at the type level. It's just saying that this object here can contain any keys that we want, but they have to be strings. We can't pass numbers here, Booleans, or anything like that. This is one way to express this.

 What you might have seen in the exercise here is that you had index types everywhere. It was saying, "You can't index this, can't use that to index this." This is saying basically that if we were to untie this record type, what it's saying is that this here is the index of the objects, the key of the object. Whenever you see index in a type error, it's usually referring to the key of an object.

 What this is saying here is that instead of using record string here, we've used this syntax that says the key of this object, we can say index string, and then you get the value afterwards, too. I can rename this to a number if I want to as well.

 Inside this cache, everything would have to be cache 1 equals value. That's an alternative way of expressing that. This is what's called an index signature inside a type. Now, we can express this in a third way, too, by using an interface. Interface can use these index signatures, too.

 Whichever solution you found, or if you found a solution, record interface or this in-line type here, and I can also extract this out to a type if I want to type blah equals this and then cache is blah. Whichever solution you found -- index string just to make those errors go away -- then it doesn't really matter. There's no pros and cons over either one of these solutions. They're just alternatives.

 Usually, record is a little bit easier to look at and easier to pass what it's doing. It also comes with a little descriptor of what it's doing, too. Any of these things can be used to construct different caches. Of course, I can change this second property to anything I want to. I can be like a 1 or a number, etc. I can throw anything in there.

 A really common pattern in JavaScript is assigning things to an object with dynamic keys, and this allows you to do it.

Assigning Dynamic Keys to an Object

 Inside this createCache function, we're creating an object, which we're calling a cache, and allowing users to specify add and remove on that cache. Inside here, you can see we've got cache createCache add 123 Matt, and then there's some errors that are happening here because it looks like cache is just typed as this. It's like an empty object, which doesn't seem quite correct.

 We're getting errors up here, too. "No index signature with a parameter of type string was found on type..." What? OK, some confusing stuff happening here and all to do with index signatures. We can't index it there. There's no indexing happening here.

 Your job is to go into the TypeScript docs and work out what could be causing this problem and how we should type this line of code here to make these errors go away.

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

Learn to type variables, functions, and errors

Become familiar with the TypeScript documentation

Gain experience with modern TypeScript tooling

, and see why TypeScript’s an essential tool for modern web developers!

The Beginner’s course is fantastic. Very well explained, and easy to navigate through. I went through it in preparation for the 

, just to ensure I had a solid foundation and even then I learned some new things. Thanks Matt!

This Beginner’s TypeScript tutorial is split into several exercises. Each features a 

 that encourages you to take an active, exploratory learning approach to finding a 

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 

You’ll need a working understanding of JavaScript.

the Beginner’s TypeScript Tutorial repo

, and use npm or yarn to install dependencies.

, you can work in a full VS Code coding environment running in your browser.

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.

Add type annotations to the function arguments

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

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

Assigning Dynamic Keys to an Object

Transcript