I have this problem regarding types in TypeScript: I am creating a svelte component for the x-axis for d3 visualization, where I pass the xScale as a property from the parent component as

<XAix {xScale}/>

In the parent element, where xScale is defined, TypeScript assigns a type for xScale based on the initialization of xScale, which looks something like

const xScale = d3.scaleBand().domain([/*string array*/]).range([/*numeric array*/]).padding();

and in the XAxis.svelte I annotate the xScale prop manually based on my definition of xScale. However, I would like to be able to dynamically annotate xScale inside XAxis.svelte, because I want to make XAxis.svelte a reusable component for other visualizations, and sometimes the x-axis scale is defined with another d3 scale, such as

const xScale = d3.scaleLinear().domain([/*numeric array*/]).range([/*numeric array*/])

What I am thinking is after I define the xScale in the parent element, I extract the type and store it somewhere, and then import it in the XAxis.svelte. Is this the way to go for this issue? If yes, how can I implement it? If no, what's the correct way?

CodePudding user response：

By building pieces of your chart with svelte components you increase the complexity through depending on order of creation of svelte components, life cycle methods and passing data between components.

I highly recommend to keep your d3 graph as a single svelte component within your svelte code and separating different pieces of your chart into TypeScript classes and functions. Then you can build your chart by using those classes and functions.

Make those components (if possible) stateless and keep the ground truth of your state at the root of the d3 svelte component.

Then you can react to events and life cycle methods in that single svelte component and update your chart accordingly.

CodePudding user response：

Think the other way around: The Svelte component defines an API and tells its users what can be put into it. So type-wise you also need to define in advance what types it expects. I don't know much about d3 but depending on your use case you could create a type that satisfies all possible use cases, like export let xScal: number[] | number | SomethingElse;.