[FIXED] How to get d3 shape constructors to return the type string properly in typescript?

Issue

I am really stuck on how to work with @types/d3 properly. All the return types are really confusing and even console.logging is not helping.

Essentially when I call the arc() construct I get an error that: An argument for 'd' was not provided. But when I console.log it only returns the proper path string and not an error or invalid value.

I can't seem to find what to put as the argument as the d value in the constructor. Also, a lot of js code I've seen doesn't have any input, what specific reason does typescript need to have an additional value?

const Test = () => {
      // ...........
     // causes error if mArc is not mArc: any
     const mArc = arc() // how to not force any as a type here
        .innerRadius(radius)
        .outerRadius(width + radius)
        .startAngle(Math.PI / 2)
        .endAngle((Math.PI * 3) / 2)
      
     console.log(mArc()); // returns a string...
     // but typescript throws an error, An argument for 'd' was not provided.
     return <path d={mArc()} />;
      
}

Sorry, I may not be understanding this software engineering correctly. When I look in the types.d file for d3-shape, it says no definition found for 'Datum', which is the type 'd' is supposed to be

Solution

A proper answer:

const Test = () => {
     const mArc = arc<void, void>()
        .innerRadius(radius)
        .outerRadius(width + radius)
        .startAngle(Math.PI / 2)
        .endAngle((Math.PI * 3) / 2)
      
     console.log(mArc());
     return <path d={mArc() || ""} />;
      
}

Answered By - Tom
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)