javascript - 类型 'forEach' 上不存在属性 '{}'

Question

我正在使用 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
    }
]

Answer 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) {
  ...
})