Nested functions in typescript gives errors

user_12985842 0
Viewed 326

I am not sure how you are supposed to nest functions in TypeScript. I was doing it similar to Javascript and got a lot of errors.

I have this in my typescript file (this is basically the only thing there):

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

And my data.csv file has this:

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

I get errors such as

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

, and

"A parameter initializer is only allowed in a function or constructor implementation.ts(2371)"
d3.js angular typescript javascript
1 Answers

The compiler is telling you that you provided the wrong types for your callback function. d3.csv returns a DSVRowArray<string> not a String[]. You've also forgot to close the bracket after .then((data: Array<String> hence why { data, forEach }: any is showing up in the argument list. string is also the wrong type for the foreach loop, it should be a DSVRowString.

Also, the compiler will prevent you from assigning a number value to a property of a DSVRowString, as the d3 devs have specified that only string properties are allowed. So if you want an object with number values you should create a new object.

You can define the DSVRowArray<string> and DSVRowString types in your callbacks but it's not necessary. The compiler already knows the types according to the type definitions provided by the d3 devs. So you can just exclude them, intellisense and tsc will infer the correct type.

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

If you absolutely need to keep the same structure, you can just typecast the DSVRowString to any. This is just a way to make the compiler leave you alone. Not recommended though.

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

There is also an overload for the csv function, where you can provide a function describing how to parse each row. In the below function data has the type d3.DSVParsedArray<{age: number}> which I get from intellisense after hovering over the variable.

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

Logging data gives me:

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 []

Which seems to just be an extension of Array with the added columns property.

user_129148330
Related