No estoy seguro de cómo se supone que debes anidar funciones en TypeScript. Lo estaba haciendo similar a Javascript y obtuve muchos errores.
Tengo esto en mi archivo mecanografiado (esto es básicamente lo único que hay):
ngAfterViewInit(): void { d3.csv('data/data.csv').then((data: Array<String> => { data.forEach(d:string =>{ d.age = Number(d.age) }) }) }Y mi archivo data.csv tiene esto:
name,age Lam,30 Peter,90 Aaron,2 Swizt,14 Irene,36 Travis, 55me salen errores como
"Argument of type '(data: String[], { data, forEach }: any) => any' is not assignable to parameter of type '(value: DSVRowArray<string>) => any'.ts(2345)", y
"A parameter initializer is only allowed in a function or constructor implementation.ts(2371)"El compilador le dice que proporcionó los tipos incorrectos para su función de devolución de llamada. d3.csv devuelve un DSVRowArray<string> no un String[] . También se olvidó de cerrar el corchete después de .then((data: Array<String> , por lo que { data, forEach }: any en la lista de argumentos. La string también es del tipo incorrecto para el ciclo foreach , debería ser un DSVRowString .
Además, el compilador evitará que asigne un valor numérico a una propiedad de DSVRowString , ya que los desarrolladores de d3 han especificado que solo se permiten propiedades de cadena. Entonces, si desea un objeto con valores numéricos, debe crear un nuevo objeto.
Puede definir los DSVRowArray<string> y DSVRowString en sus devoluciones de llamada, pero no es necesario. El compilador ya conoce los tipos de acuerdo con las definiciones de tipo proporcionadas por los desarrolladores de d3. Entonces puede excluirlos, intellisense y tsc inferirán el tipo correcto.
ngAfterViewInit(): void { d3.csv('data/data.csv').then((data) => { data.forEach((d) => { const convertedData = { age: Number(d['age']) }; }); }); } Si es absolutamente necesario mantener la misma estructura, puede encasillar el DSVRowString en any archivo . Esta es solo una forma de hacer que el compilador lo deje en paz. Aunque no recomendado.
ngAfterViewInit(): void { d3.csv('data/data.csv').then((data) => { data.forEach((d: any) => { d.age = Number(d.age); }); }); } También hay una sobrecarga para la función csv, donde puede proporcionar una función que describa cómo analizar cada fila. En la siguiente función, los data tienen el tipo d3.DSVParsedArray<{age: number}> que obtengo de intellisense después de pasar el mouse sobre la variable.
ngAfterViewInit() { d3.csv('data/data.csv', (d) => { return { age: Number(d['age']) }; }).then((data) => console.log(data)); }El registro de datos me da:
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 [] Lo que parece ser solo una extensión de Array con la propiedad de columns agregadas.