TypeScript type cast D3 js errors

0 votes

Now, how should I solve this/typecast this?

import { useEffect, useState } from "react";
import { arc, pie, DSVRowArray, csv, PieArcDatum } from "d3";

const CSVURL =
  "https://gist.githubusercontent.com/mzs21/df0621d1ca5a25fa6baeeae93562c1a1/raw/CSSNamedColors.csv";

const width = 960;
const height = 500;
const centerX = width / 2;
const centerY = height / 2;

const FetchData = () => {
  const [data, setdata] = useState<DSVRowArray<string>>();

  const pieArc = arc().innerRadius(0).outerRadius(width);
  const colorPie = pie().value(1);

  useEffect(() => {
    csv(CSVURL).then(setdata); // Fetching data & updating data
  }, []);

  if (!data) {
    return <pre>loading...</pre>;
  }

  console.log(data[0]);

  return (
    <svg width={width} height={height}>
      <g transform={`translate(${centerX}, ${centerY})`}>
        {colorPie(data).map((d: PieArcDatum<number>) => (
          <path fill={d.data["RGB hex value"]} d={pieArc(d)} />
        ))}
      </g>
    </svg>
  );
};

export default FetchData;

The code executes but with error in VSCode. Errors of VSCode are in the picture.

Errors of VSCode are in the picture

I'm also pasting the errors here:

ERROR in src/components/FetchData/FetchData.tsx:99:19
TS2345: Argument of type 'DSVRowArray<string> | PieArcDatum<number>' is not assignable to parameter of type '(number | { valueOf(): number; })[]'.
  Type 'DSVRowArray<string>' is not assignable to type '(number | { valueOf(): number; })[]'.
    The types returned by 'pop()' are incompatible between these types.
      Type 'DSVRowString<string> | undefined' is not assignable to type 'number | { valueOf(): number; } | undefined'.
        Type 'DSVRowString<string>' is not assignable to type 'number | { valueOf(): number; } | undefined'.
          Type 'DSVRowString<string>' is not assignable to type '{ valueOf(): number; }'.
            The types returned by 'valueOf()' are incompatible between these types.
              Type 'Object' is not assignable to type 'number'.
     97 |             } */}
     98 |
  >  99 |         {colorPie(data).map((d: DSVRowArray<string> | PieArcDatum<number>) => (
        |                   ^^^^
    100 |           <path
    101 |             key={Math.random()}
    102 |             fill={d.data["RGB hex value"]}

ERROR in src/components/FetchData/FetchData.tsx:99:29
TS2345: Argument of type '(d: DSVRowArray<string> | PieArcDatum<number>) => JSX.Element' is not assignable to parameter of type '(value: PieArcDatum<number | { valueOf(): number; }>, index: number, array: PieArcDatum<number | { valueOf(): number; }>[]) => Element'.
  Types of parameters 'd' and 'value' are incompatible.
    Type 'PieArcDatum<number | { valueOf(): number; }>' is not assignable to type 'DSVRowArray<string> | PieArcDatum<number>'.
      Type 'PieArcDatum<number | { valueOf(): number; }>' is not assignable to type 'PieArcDatum<number>'.
        Type 'number | { valueOf(): number; }' is not assignable to type 'number'.
          Type '{ valueOf(): number; }' is not assignable to type 'number'.
     97 |             } */}
     98 |
  >  99 |         {colorPie(data).map((d: DSVRowArray<string> | PieArcDatum<number>) => (
        |                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 100 |           <path
        | ^^^^^^^^^^^^^^^
  > 101 |             key={Math.random()}
        | ^^^^^^^^^^^^^^^
  > 102 |             fill={d.data["RGB hex value"]}
        | ^^^^^^^^^^^^^^^
  > 103 |             d={pieArc(d)!}
        | ^^^^^^^^^^^^^^^
  > 104 |           />
        | ^^^^^^^^^^^^^^^
  > 105 |         ))}
        | ^^^^^^^^^^
    106 |       </g>
    107 |     </svg>
    108 |   );

ERROR in src/components/FetchData/FetchData.tsx:102:21
TS2339: Property 'data' does not exist on type 'DSVRowArray<string> | PieArcDatum<number>'.
  Property 'data' does not exist on type 'DSVRowArray<string>'.
    100 |           <path
    101 |             key={Math.random()}
  > 102 |             fill={d.data["RGB hex value"]}
        |                     ^^^^
    103 |             d={pieArc(d)!}
    104 |           />
    105 |         ))}

ERROR in src/components/FetchData/FetchData.tsx:103:23
TS2769: No overload matches this call.
  Overload 1 of 2, '(this: any, d: DefaultArcObject, ...args: any[]): string | null', gave the following error.
    Argument of type 'DSVRowArray<string> | PieArcDatum<number>' is not assignable to parameter of type 'DefaultArcObject'.
      Type 'DSVRowArray<string>' is missing the following properties from type 'DefaultArcObject': innerRadius, outerRadius, startAngle, endAngle
  Overload 2 of 2, '(this: any, d: DefaultArcObject, ...args: any[]): void', gave the following error.
    Argument of type 'DSVRowArray<string> | PieArcDatum<number>' is not assignable to parameter of type 'DefaultArcObject'.
      Type 'DSVRowArray<string>' is not assignable to type 'DefaultArcObject'.
    101 |             key={Math.random()}
    102 |             fill={d.data["RGB hex value"]}
  > 103 |             d={pieArc(d)!}
        |                       ^
    104 |           />
    105 |         ))}
    106 |       </g>

In CodeSandBox it's working fine. No error. Playground : https://codesandbox.io/s/frosty-cannon-bfxprg?file=/src/FetchData.tsx:0-975

Jul 18, 2022 in TypeSript by Logan
• 2,140 points
1,553 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In TypeSript

0 votes
1 answer
0 votes
1 answer

Typescript: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Double check the newly added object types. ...READ MORE

answered Jun 8, 2022 in TypeSript by Nina
• 3,060 points
46,165 views
0 votes
1 answer

TypeScript Object assign gives me an error property assign does not exist on type ObjectConstructor

For TypeScript 2.1 and higher, you can ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
2,099 views
0 votes
1 answer

Cast a JSON Object to a TypeScript class

I had the same issue and this ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
3,095 views
0 votes
1 answer

What is "not assignable to parameter of type never" error in TypeScript?

All you have to do is define ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
57,534 views
0 votes
1 answer

Interface type check with Typescript

You can achieve what you want without ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
5,887 views
0 votes
1 answer

array of LocalBusinessJsonLd Schema using next-seo

specify the unique keyoverride properties if you ...READ MORE

answered Feb 14, 2022 in Others by narikkadan
• 63,600 points
1,075 views
0 votes
1 answer

React Server Components Performance on SEO

for rendering into html  you have to ...READ MORE

answered Feb 14, 2022 in Others by narikkadan
• 63,600 points
610 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 63,600 points
6,152 views
0 votes
1 answer

React Server Components Performance on SEO

const html = readFileSync(       path.resolve(__dirname, '../build/index.html'),       'utf8'     );     // Note: this ...READ MORE

answered Feb 25, 2022 in Others by narikkadan
• 63,600 points
1,012 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP