打字稿中的嵌套函数会出错

Question

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

我的打字稿文件中有这个（这基本上是那里唯一的东西）：

  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 returns 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 属性。

打字稿中的嵌套函数会出错

Nested functions in typescript gives errors

javascript

angular

typescript

d3.js