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
方法用作类型保护。
如果满足条件,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[]
类型并且不用担心它。
如果这是导致我们的情况出现错误的原因,最好找出错误类型的来源。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。