Property 'map' does not exist on type in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 22, 2022

banner

Photo from Unsplash

Property 'map' does not exist on type in TypeScript #

The error "Property 'map' does not exist on type" occurs when we call the map() method on a value that isn't an array. To solve the error, make sure to only call the map() method on arrays or correct the type of the variable on which you call the method.

property map does not exist on type

Here are 2 examples of how the error occurs.

index.ts
const obj = { name: 'James', age: 30, }; // ⛔️ Error: Property 'map' does not exist on type // '{ name: string; age: number; }'.ts(2339) obj.map(); // ----------------------------------------------- // 👇️ it's an array, but has incorrect type const arr = [1, 2, 3] as unknown as { name: string }; // ⛔️ Error: Property 'map' does not exist on type // '{ name: string; }'.ts(2339) arr.map();

In the first example, we called the Array.map() method on an object, which caused the error.

To start debugging, console.log the value you're calling the map method on and make sure it's an array.

index.ts
const obj = { name: 'James', age: 30, }; console.log(Array.isArray(obj)); // 👉️ false console.log(Array.isArray([])); // 👉️ true

If you need to call the map() method on an object, you need to get an array of the object's keys first, because the map() method can only be called on arrays.

index.ts
const obj = { name: 'James', age: 30, }; const result = Object.keys(obj).map((key) => { return { [key]: obj[key as keyof typeof obj] }; }); console.log(result); // 👉️ [{name: 'James'}, {age: 30}]

If the value can sometimes be an object and other times an array, you have to use a type guard when calling the map method.

index.ts
const maybeArray = Math.random() > 0.5 ? [1, 2, 3] : { name: 'James Doe' }; if (Array.isArray(maybeArray)) { const result = maybeArray.map((element) => { return element * 2; }); console.log(result); // 👉️ [2, 4, 6] }

The Array.isArray method serves as a type guard.

If the condition is met, TypeScript knows that the maybeArray variable stores an array and allows us to call the map() method.

Had we tried to call the method directly on the variable, we would have gotten the "Property 'map' does not exist on type" error, because of the possibility that the variable is not an array.

If you have concluded that the variable on which you're calling the map method is an array, you need to correct its type.

index.ts
const arr = [1, 2, 3] as unknown as { name: string }; // ⛔️ Error: Property 'map' does not exist on type // '{ name: string; }'.ts(2339) arr.map();

The arr variable stores an array, however, it has a different type, so TypeScript won't let us call the map() method.

If you have no control over the type of the variable and know that it's an array, you can use a type assertion.

index.ts
const arr = [1, 2, 3] as unknown as { name: string }; const result = (arr as unknown as any[]).map((element) => { return element * 2; }); console.log(result); // 👉️ [2, 4, 6]

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that the arr variable will be of type any[] and not to worry about it.

If this is the cause of the error in your case, it's best to figure out where the incorrect type stems from.

Conclusion #

The error "Property 'map' does not exist on type" occurs when we call the map() method on a value that isn't an array. To solve the error, make sure to only call the map() method on arrays or correct the type of the variable on which you call the method.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.