类型“”上不存在属性“forEach”

Posted 2023-02-22

【中文标题】类型“”上不存在属性“forEach”

【英文标题】：Property 'forEach' does not exist on type ''类型“”上不存在属性“forEach”

【发布时间】：2017-12-14 18:17:25

【问题描述】：

我正在使用 Angular CLI 和 D3.js v4，但我不断收到 TypeScript 错误：Property 'forEach' does not exist on type ''。当我尝试引入我的数据时，forEach 函数会发生错误。

我正在关注D3 Tips and Tricks，这似乎非常广泛且对图形库很有帮助，但不幸的是对我当前的问题没有帮助。

我知道我的 json 文件的路径是正确的，因为如果我的 forEach 函数在我的代码中被注释掉，我可以 console.log 数据。

我还尝试在forEach 函数之前定义data，以便让Typescript 知道data 是一个数组。

感谢任何帮助！谢谢！

import  Component, OnInit  from '@angular/core';
import * as d3 from 'd3';

@Component(
    selector: 'pl-lukaku-graphs',
    templateUrl: './lukaku-graphs.component.html',
    styleUrls: ['./lukaku-graphs.component.scss']
)
export class LukakuGraphsComponent implements OnInit 

    constructor()  

    total_min() 
        // create var for graph wrap
        let wrap = document.getElementById("wrapMinPlayed");
        // set up graph area
        let margin = top: 30, right: 20, bottom: 30, left: 20,
            width = wrap.offsetWidth - margin.left - margin.right,
            height = wrap.offsetHeight - margin.top - margin.bottom;
        let data = [];
        d3.json('../../../../assets/data/lukaku.json', function(error, data) 
            console.log(data);
            console.log(error);
            if (error) throw error;
            // format data
            data.forEach(function(d) 
                d.date = parseTime(d.date);
                d.close = +d.close;
            );
        );
    

    ngOnInit() 
        this.total_min();
    




[
    
        "season": "16/17",
        "match_day": "1",
        "opponent": "Spurs",
        "home_away": "Home",
        "final": "1-1",
        "status": "Not in squad",
        "min_played": 0,
        "goals": 0,
        "goal_min": [],
        "assists": 0
    
]

【问题讨论】：

错误似乎不言自明...您正在使用存储在lukaku.json 中的对象而不是数组。向我们展示该文件中的数据结构

@charlietfl 是的，我正在处理对象，但它们被包装在一个数组中。添加了我的数据的示例。抱歉，我显然不喜欢这里的格式...

【参考方案1】：

TypeScript 无法在这里知道 data 是一个具有 forEach 方法的数组。

为了解决这个问题，data 应该正确输入，例如：

d3.json('../../../../assets/data/lukaku.json', function(error, data: any[]) 
  ...
)

由于d3.json 是generic method，正确的做法是指定泛型类型：

d3.json<any[]>('../../../../assets/data/lukaku.json', function(error, data) 
  ...
)

【讨论】：

非常感谢！我相当肯定这个问题与我输入data 的方式有关，但我找不到解决方案。再次感谢您的帮助！

@tripstar 不客气。大多数情况下，参数会被隐式输入为any，不会有这样的问题，但这种情况不同。这就是为什么检查类型定义总是一个好主意（在类型文件或 IDE 类型建议中）。

再次感谢。正要跳到这里，看看我是否能得到更深入的答案。尝试尽可能多地学习 ES6！