TypeScript 中 Property ‘map’ does not exist on type 错误

当我们对不是数组的值调用 map() 方法时,会出现错误“Property ‘map’ does not exist on type”。 要解决此错误,需要确保仅对数组调用 map() 方法或更正调用该方法的变量的类型。

下面是产生上述错误的示例代码

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();

在第一个示例中,我们调用了对象的 Array.map() 方法,这导致了错误。

要开始调试,我们可以使用 console.log 打印 map 方法的值并确保它是一个数组。

const obj = {
  name: 'James',
  age: 30,
};

console.log(Array.isArray(obj)); // ?️ false
console.log(Array.isArray([])); // ?️ true

如果你需要调用一个对象的 map() 方法,你需要先得到这个对象的键的数组,因为 map() 方法只能在数组上调用。

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}]

如果该值有时可以是一个对象而有时是一个数组,则在调用 map 方法时必须使用类型保护。

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]
}

Array.isArray 方法用作类型保护。

如果我们尝试直接在变量上调用该方法,我们会得到“类型上不存在属性 ‘map’”错误,因为变量可能不是数组。

如果我们断定调用 map 方法的变量是数组,则需要更正其类型。

const arr = [1, 2, 3] as unknown as { name: string };

// ⛔️ Error: Property 'map' does not exist on type
// '{ name: string; }'.ts(2339)
arr.map();

如果我们无法控制变量的类型并且知道它是一个数组,则可以使用类型断言。

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]

当我们有关于 TypeScript 不知道的值类型的信息时,使用类型断言。

如果这是导致我们的情况出现错误的原因,最好找出错误类型的来源。