[00:00] In this exercise, we have an object of product prices, apple, banana, and orange, and then we have a getPrice function. This, we have to pass in a product name here, and we return product prices product name. So we're indexing into product prices with the product name, which is string. And it says, element implicitly add on any type

[00:19] because expression of type string can't be used to index type apple, banana, orange. No index signature with a parameter of type string was found on type apple, banana, orange. Okay, your job is to work out why this error is occurring and what we can do either in the types or at the runtime to figure this out.

[00:38] In fact, I think this exercise only has types as its solution, so you don't need to do too much on the runtime. Yeah, good luck.

Here we have an object named `productPrices`. It has three properties: Apple, Banana, and Orange, each with a price value:

```tsx
const productPrices = {
	Apple: 1.2,
	Banana: 0.5,
	Orange: 0.8,
};
```

There is also a function `getPrice` that takes in a product name as a parameter:

```tsx
const getPrice = (productName: string) => {
	return productPrices[productName]; // red squiggly line under productPrices[productName]
};
```

The `getPrice` function is designed to index into the `productPrices` object using the product name provided.

However, there is an error under `productPrices` when trying to index into the object:

```tsx
// hovering over productPrices[productName] shows:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ Apple: number; Banana: number; Orange: number; }'.
```

## Challenge

Your challenge is to figure out why this error is occurring. The solution only involves changes at the type level, so you don't need to alter the runtime code.

Fix an error in TypeScript that says an expression can't be used to index a certain type.

[00:00] Okay, let's work out why this error is occurring here. Now, the key here is you can ignore the element implicitly has an any type. What this is basically saying is element implicitly has an any type. I don't know what this type is supposed to be. Okay, that's essentially what this phrase means.

[00:17] Expression of type string can't be used to index type apple banana number. Now, if we think about what indexing something means, it basically means accessing it with dot notation, right? Or with this dynamic string notation. So apple banana orange, these are the three things

[00:36] that you can use to index into product prices here. Now, we could make this error go away because we know that we're passing in product name string here. So the thing we're trying to index into product prices is a string. So it could be pair, for instance. It could be something that doesn't exist

[00:55] on these product prices. And we know this because we can do get price pair like this and the error is not going to be caused here. So the error has to be caused somewhere because there's a mismatch with what we're trying to index into product prices with between what its keys actually are. So how do we resolve this?

[01:14] No index signature with a parameter of type string was found on type apple banana orange. So index signature, what does that mean? Well, if we think about this product prices here, we can index into it with only three possible values, apple banana or orange.

[01:31] Those three values are kind of like its index signature. The signature is kind of like, you know, the way it describes the way it can be called. So it's like, you can only index into me with three possible keys. So we can though, we could make that index signature potentially wider.

[01:48] We could say you could index into it with any string. So you could say product prices is now a record of, don't know why I went American there, a record of string number here. Now what's going on here is we're now saying that product prices, it can contain any string.

[02:07] So it has an index signature of string. This means that when I access it, I can actually pass in anything into here and I'm going to get back a number or I can pass apple if I want to, or I can pass pear and that might return me a number or undefined. So now the error goes away because we've given an index signature

[02:26] to this product prices, or we've said it's index signature instead of being just apple, banana, orange is now any string. So we take this off here. How can we make it though? Let's say that we didn't want it to error here. We didn't want it to error on return product prices product name. We actually wanted it to error

[02:43] when we call the function with the wrong thing. Let's say we wanted to change product name. So it's actually apple, banana, or orange. We could of course do this. We could say orange or apple or banana. And now I've got to add an extra pipe there. Now the error goes away because we're indexing into it

[03:04] with the correct things here. If we were to add pear onto this, then we're going to get an error here because property pear does not exist on apple, banana, orange. There you go. So we're starting to see why this error exists. So now we get an error here because pear is not assignable to the closer type that we were given here.

[03:24] Nice. So this is one way of doing it. We can even remove this duplication. We can say type of, or rather key of, type of product prices. And now if we add an extra product price to this, so we say get, whoops, get price. We get apple, banana, or orange here.

[03:44] And let's say we remove orange from up here. We're then going to get sort of the same error down here because we no longer have an orange on the product prices. This means the key of those product prices is not going to include orange. And so get price doesn't have orange on there. And nice, this is one way of doing it too.

[04:03] But what if we know, we actually do know the product name is going to be apple, or banana, or orange. And we kind of want to cheat TypeScript a little bit. We want to get rid of this error properly. Well, what we can do is we can say product prices, product name. We can basically cast product name to the thing that we want it to be.

[04:22] And we can say as key of type of product prices. And now the error goes away. If I move this into a separate line, we can say const index into this, and we can just use index there. So now we can see that index is basically apple, or banana, or orange.

[04:41] And this means then that product prices index, we've basically forced it into that slot. We can still call get price with something that isn't that. We can say get price pair, for instance. And this means that we will possibly get some unsafe stuff coming out of here. But it does mean that you've made the error go away,

[04:59] which is sometimes all you really want to do. So those are your three options. To review, we can do product name here. We can basically make get price, force it to be either apple, banana, or orange. Or we can widen the product prices. This is often the safest route, I think, to make it so that you can add any kind of thing

[05:18] to product prices and index into it in any way. Or we can use a cast when we actually index into it and force it to be that thing. So three choices I would, in general, where you can widen out the type. This will make your apps, I think, a little bit more maintainable. And yeah, it sort of just makes more sense with what you're actually doing in TypeScript.

We have an error because we are attempting to index into the `productPrices` object with a string.

Here's the error message:

```typescript
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ Apple: number; Banana: number; Orange: number; }'.
```

Let's break the error down.

The "implicit 'any'" part of the error message is TypeScript telling us it doesn't know what type the type is supposed to be.

For the "index" part of the error message, we need to remember that indexing means accessing an object using dot notation or dynamic string notation.

When typing `productPrices` followed by a `.` or `[]`, TypeScript suggests autocompletion for one of the three possible keys: `Apple`, `Banana`, or `Orange`.

The three possible values are like an index signature for how the object can be called.

There are a few ways we can update `productPrices` to resolve this error:

## Use a Record

One option is to update `productPrices` to use a `Record` type where the index is a string, followed by a number:

```typescript
const productPrices: Record<string, number> = {
	Apple: 1.2,
	Banana: 0.5,
	Orange: 0.8,
};
```

With this `Record` setup, we could pass in any string to index into the object whether it exists in `productPrices` or not.

## Error in the Function

Another option is to update the `getPrice` function to use a union type for the `productName` parameter to ensure the function only accepts specific product names:

```typescript
const getPrice = (productName: "Apple" | "Banana" | "Orange") => {
	return productPrices[productName];
};

getPrice("Pear"); // red squiggly line under "Pear"
```

With this change, calling `getPrice` with an invalid product name will result in a TypeScript error.

## Using `keyof typeof`

A third option is to use `keyof typeof` to get the type of the `productPrices` object and use that as the type for the `productName` parameter:

```typescript
const getPrice = (productName: keyof typeof productPrices) => {
	return productPrices[productName];
};
```

Using `keyof typeof` is a good option because it ensures that the `productName` parameter is always a valid key for the `productPrices` object.

When hovering over the call to `getPrice`, we can see that it expects a value of type `"Apple" | "Banana" | "Orange"`:

```typescript
getPrice("Pear"); // red squiggly line under "Pear"

// hovering over getPrice shows:
getPrice: (productName: "Apple" | "Banana" | "Orange") => number;
```

## Casting

With casting we can cheat the type system and bypass the TypeScript error.

Assuming we know the `productName` will definitely be one of `Apple`, `Banana`, or `Orange`, we can use casting to bypass the TypeScript error.

To do this, we'll use `keyof typeof` inside the actual indexing:

```typescript
const getPrice = (productName: string) => {
	return productPrices[productName as keyof typeof productPrices];
};
```

This approach broadens the type and eliminates the error.

Note that this is a workaround, not a standard solution.

The best thing you should do in this situation is provide proper types to your variables and functions.

Explore a few options for indexing into an object without errors in TypeScript.

Options for Indexing Without Errors

Fixing "Expression Can't Be Used To Index Type X"

Type checking is awesome, but sometimes it gives you error messages that can be challenging to interpret and resolve.

Whether you're new to TypeScript or looking to deepen your understanding, this tutorial is your guide to understanding some of TypeScript's most common errors.

In this tutorial, you'll find challenges centered around reading error messages and practical solutions to solving the issues they describe. You'll gain insights into:

-   **Type Not Assignable Error:** Understand why type mismatches occur and explore solutions like widening type definitions.
-   **Property Does Not Exist on Type Error:** Learn how to deal with undeclared properties and the use of Record types.
-   **Possibly Null or Undefined Error:** Tackle nullability issues with techniques like optional chaining and type narrowing.
-   **Types of Property are Incompatible Error:** Decode complex error messages and refine your type definitions.
-   **Type Unknown Error:** Handle unknown types effectively.
-   **Expression of Type String Can't Be Used to Index Type Error:** Overcome indexing issues with strategic type refinements.
-   **Property Has No Initializer and Is Not Definitely Assigned in Constructor Error:** Address class property initialization challenges.
-   **Conversion of Type May Be a Mistake Error:** Navigate type conversion with caution.
-   **Cannot Redeclare Block-scoped Variable Error:** Resolve naming conflicts and understand TypeScript's module detection.
-   **Could Not Find a Declaration File for Module Error:** Deal with missing type declarations in JavaScript modules.

### Instructions

This tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory approach to finding a solution.

### You'll need to:

- Watch and read the problem introduction.
- Check out the TypeScript or React documentation or dive into type definitions to look for help
- Try a solution and check your work. There may be more than one way to solve the challenge! Whether you succeed or get stuck, watch and read the solution and check out the included code.

### Prerequisites

You’ll need a working understanding of TypeScript.

### Running the Exercises

Clone [the Error Messages Tutorial repo](https://github.com/total-typescript/error-messages-tutorial?tab=readme-ov-file), and use npm or yarn to install dependencies.

If you [follow this link to use gitpod](https://gitpod.io/#https://github.com/total-typescript/error-messages-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/error-messages-tutorial/blob/main/readme.md) for more.


TypeScript boosts productivity but faces pitfalls like type mismatches, null values, & puzzling errors. Learn to spot & solve these for swift progress.

Errors Messages Tutorial

User object and a UserProfile interface, your mission is to understand and solve a type error. 'blue' is not assignable to 'light' or 'dark'

This lesson explores type assignability in TypeScript, including why this error occurs and how to fix it. With practical examples and step-by-step guidance.

Understanding and Fixing 'Type Not Assignable' Errors

Fixing "X Is Not Assignable To Y"

Troubleshoot a TypeScript error that says a property does not exist on a certain type.

There are a few ways to solve the Property Does Not Exist on Type error in TypeScript.

Techniques for Solving Property Does Not Exist on Type Error

Fixing "Property Does Not Exist On Type"

TypeScript will show and error when you try to access a property that could be null or undefined.

The "possibly null or undefined" error is a common TypeScript error that can be solved in a few different ways.

Solving the Possibly Null or Undefined Error

Fixing "X is Possibly Null Or Undefined"

Sometimes TypeScript error messages are long and confusing. Learn how to make them more readable.

There are a few ways to make TypeScript error messages more readable and informative.

Getting More Useful TypeScript Errors

Fixing "Types Of Property Are Incompatible"

Explore techniques for solving the 'is of type unknown' error in TypeScript.

Narrowing is a great way to handle unknown errors when working with try-catch blocks in TypeScript.

Use Narrowing to Handle unknown Errors

Fixing "X Is Of Type Unknown"

Resolve errors related to private property initializers and constructor assignments in TypeScript.

TypeScript errors related to class properties have a few ways of being resolved.

Options for Resolving Class Property Errors

Fixing "Property X Has No Initializer"

TypeScript will give an error when attempting to convert a type that doesn't sufficiently overlap with another type.

There needs to be sufficient overlap in order convert one type to another.

Working Around Type Conversion Errors

Fixing "Conversion Of Type X May Be A Mistake"

There are two ways to solve an error related to re-declaring a block-scoped variable in TypeScript.

Treating a file as a module or adjusting TypeScript configuration can resolve the re-declaring a block-scoped variable error.

Resolving the Block-scoped Variable Error in TypeScript

Fixing "Cannot Redeclare Block-Scoped Variable"

Learn to resolve an error when a TypeScript import is missing a declaration file.

The DefinitelyTyped project provides type declaration files for many popular JavaScript packages.

Transcript

Fixing "Expression Can't Be Used To Index Type X"

Transcript