Solve - Property 'map' does not exist on type in TypeScript

avatar

Borislav Hadzhiev

Tue Mar 22 20223 min read

banner

Photo by Kalen Emsley

Solve - 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 it's 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.