javascript - typescript 中的嵌套函数会出现错误

Question

我不确定你应该如何在 TypeScript 中嵌套函数。我的做法与 JavaScript 类似，但出现了很多错误。

我的 typescript 文件中有这个(这基本上是那里唯一的东西):

  ngAfterViewInit(): void {
    d3.csv('data/data.csv').then((data: Array<String> => {
      data.forEach(d:string =>{
        d.age = Number(d.age)
      })
    })
  }

我的 data.csv 文件有这个:

name,age
Lam,30
Peter,90
Aaron,2
Swizt,14
Irene,36
Travis, 55

我收到如下错误

"Argument of type '(data: String[], { data, forEach }: any) => any' is not assignable to parameter of type '(value: DSVRowArray<string>) => any'.ts(2345)"

，和

"A parameter initializer is only allowed in a function or constructor implementation.ts(2371)"

Answer 1

编译器告诉您为回调函数提供了错误的类型。 d3.csv返回 DSVRowArray<string>不是String[] 。您还忘记在 .then((data: Array<String> 之后关闭括号因此为什么{ data, forEach }: any显示在参数列表中。 string foreach 的类型也是错误的循环，它应该是 DSVRowString .

此外，编译器将阻止您为 DSVRowString 的属性分配数值。 ，因为 d3 开发人员已指定仅允许使用字符串属性。因此，如果您想要一个具有数值的对象，您应该创建一个新对象。

您可以定义 DSVRowArray<string>和DSVRowString输入您的回调，但这不是必需的。编译器已经根据 d3 开发人员提供的类型定义知道类型。所以你可以排除它们，intellisense 和 tsc 将推断出正确的类型。

  ngAfterViewInit(): void {
    d3.csv('data/data.csv').then((data) => {
      data.forEach((d) => {
        const convertedData = { age: Number(d['age']) };
      });
    });
  }

如果您绝对需要保持相同的结构，您可以直接输入 DSVRowString至any 。这只是让编译器不打扰你的一种方法。不过不推荐。

  ngAfterViewInit(): void {
    d3.csv('data/data.csv').then((data) => {
      data.forEach((d: any) => {
        d.age = Number(d.age);
      });
    });
  }

csv 函数还有一个重载，您可以在其中提供一个描述如何解析每一行的函数。在下面的函数中 data类型为 d3.DSVParsedArray<{age: number}>将鼠标悬停在变量上后，我会从智能感知中得到它。

  ngAfterViewInit() {
    d3.csv('data/data.csv', (d) => {
      return { age: Number(d['age']) };
    }).then((data) => console.log(data));
  }

记录数据给我:

Array(6) [ {…}, {…}, {…}, {…}, {…}, {…} ]
  0: Object { age: 30 }
  1: Object { age: 90 }
  2: Object { age: 2 }
  3: Object { age: 14 }
  4: Object { age: 36 }
  5: Object { age: 55 }
  columns: Array [ "name", "age" ]
  length: 6
  <prototype>: Array []

这似乎只是 Array 的扩展添加 columns属性。