Property 'map' does not exist on type in TypeScript [Fixed] | bobbyhadz (2024)

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

The error "Property 'map' does not exist on type" occurs when we call themap() method on a value that isn't an array.

To solve the error, make sure to only call the map() method on arrays orcorrect the type of the variable on which you call the method.

Here are 2 examples of how the error occurs.

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

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

2. In the second example, we called the Array.map() method on an array that istyped incorrectly.

# Calling the map() method on a value that isn't an array

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

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

Copied!
const obj = { name: 'Bobby Hadz', age: 30,};console.log(Array.isArray(obj)); // 👉️ falseconsole.log(Array.isArray([])); // 👉️ true

The Array.isArray() method returns true if the value is an array and falseotherwise.

# Using the Array.map() method with an object

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

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

The Object.keys() method returns an array of the object's keys, on which wecan call the Array.map() method.

Copied!
const obj = { name: 'Bobby Hadz', age: 30,};console.log(Object.keys(obj)); // [ 'name', 'age' ]

# Use a type guard before calling the Array.map() method

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

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

TheArray.isArraymethod serves as a type guard.

Had we tried to call the method directly on the variable, we would have gottenthe error because of the possibility that the variable is not an array.

# Type the variable correctly before calling Array.map()

If the variable on which you're calling the map() method is an array, you needto correct its type.

Copied!
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, soTypeScript won't let us call the map() method.

Copied!
// ✅ typed as an array of numbersconst arr = [1, 2, 3] as number[];arr.map((element) => { console.log(element);});

We used a type assertion to set the array's type to number[].

Most of the time, using a type assertion is not necessary as you can set thecorrect type when declaring the variable.

Copied!
// ✅ type variable as an array of numbersconst arr: number[] = [1, 2, 3];arr.map((element) => { console.log(element);});

Here is an example oftyping a variable as an array of objects.

Copied!
type Employee = { id: number; name: string;};const arr: Employee[] = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bobby' }, { id: 3, name: 'Carl' },];arr.map((obj) => { console.log(obj); console.log(obj.name);});

We set the array's type to Employee[], in other words, an array of objects oftype Employee.

I've also written a detailed guide onhow to declare an empty array for a typed variable.

# Use a type assertion to solve the error

If you have no control over the type of the variable and know that it's anarray, use atype assertion.

Copied!
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 thatTypeScript can't know about.

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