迹忆客 专注技术分享

当我们对不是数组的值调用 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 方法用作类型保护。

如果满足条件，TypeScript 知道 maybeArray 变量存储一个数组并允许我们调用 map() 方法。

如果我们尝试直接在变量上调用该方法，我们会得到“类型上不存在属性 '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();

arr 变量存储一个数组，但是它有不同的类型，所以 TypeScript 不会让我们调用 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 不知道的值类型的信息时，使用类型断言。

我们有效地告诉 TypeScript arr 变量将是 any[] 类型并且不用担心它。

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