Using sunburst with react+typescript gives: Property "Xyz" does not exist on type after renaming jsx file to tsx

[Mahesha999]

I am trying out sunburst-chart in react. The component looks something like follows:

SunburstChart.js

import SunburstChart from "sunburst-chart";
import fromKapsule from "react-kapsule";

const ReactSunburst = fromKapsule(SunburstChart, {
  methodNames: ["focusNode"]
});

const Chart = ({ data }) => (
  <ReactSunburst
    //...
    data={data}
  />
);

export default Chart;

App.js

import SunburstChart from "./components/SunburstChart";
import multisats from "./data/mulstats.json";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="chart">
        <SunburstChart data={multisats} />
      </div>
    </div>
  );
}

This works as can be seen in this sandbox. However, I want to use this in typescript. So, I simply tried to change extension from SunburstChart.js to SunburstChart.tsx hoping that it will work out of the box. But I ended up getting following error (check another sandbox):

Type '{ width: number; height: number; excludeRoot: true; label: string; size: string; color: string; centerRadius: number; minSliceAngle: number; radiusScaleExponent: number; tooltipContent: (d: any, node: any) => string; data: any; }' is not assignable to type 'IntrinsicAttributes & { ref?: MutableRefObject<{}>; } & { children?: ReactNode; }'.
  Property 'width' does not exist on type 'IntrinsicAttributes & { ref?: MutableRefObject<{}>; } & { children?: ReactNode; }'.ts(2322)

I am getting same error in my local machine. Though, the sandbox is still rendering the sunburst visualization, my local setup is not rendering it. The sunburst-chart repo does specify type definitions in index.d.ts file. Why I am still getting this type related error? Is it because of fromKapsule()? Or am missing something really stupid?

[Mahesha999]

Since am not getting any responses on StackOverflow and github (for more than 24 hours) to my specific code example, I will also like to find any TypeScrip+react example of this Sunburst component. All existing examples are in JS+react.

[vasturiano]

@Mahesha999 as you can see here, react-kapsule uses generics to set the component props: https://github.com/vasturiano/react-kapsule/blob/ae3bc2f38cb8806191e6f28033154e31280ce3f7/src/index.d.ts#L20

It does not automatically pickup the underlying kapsule type definitions, because there's no way to do a direct translation.

So, you should just need to add the typings to the fromKapsule, call, something like:

const ReactSunburst = fromKapsule<{
  width: number;
  height: number;
}>(SunburstChart, {
  methodNames: ["focusNode"]
});

[Mahesha999]

This seem to work, only that I am not able to figure it out what should be the type of

tooltipContent={(d, node) => `${secondsToHms(node.value)}`}

I tried copy pasting everything from sunburst-chart/src/index.d.ts, but unable to figure it out how one should introduce generic type ChainableInstance for specifying type of tooltipContent while using fromKapsule:

Also I was getting following error on SunburstChart too:

Seems that I need TypeScript refresher... 😕

Regardless, I was getting module not found error in browser for this file on my local machine. I initially thought it was due to above errors that my webpack is not transpiling this file and is not available to browser. But then I realized that there is some bug due to which it was not transpiling my file. It started to work once I manually run npm run dev, even though TypeScript is still complaining above errors in vscode (similar to how codesandbox renders visualization while still showing typing errors).

[vasturiano]

@Mahesha999 tooltipContent should be typed like:

tooltipContent: (node: Node, dataNode: DataNode) => string

And you can import the Node and DataNode definitions from sunburst-chart: https://github.com/vasturiano/sunburst-chart/blob/512a15a398c998beea7cf5bd42277465ac9899b1/src/index.d.ts#L6-L25