toomuchdesign/react-minimal-pie-chart

Percentage labels example causes Typescript errors

majelbstoat opened this issue · 2 comments

majelbstoat commented

Do you want to request a feature or report a bug?

report a bug
...

What is the current behaviour?

set props like the Percentage labels story:

<PieChart
      data={dataMock}
      label={({ data, dataIndex }) =>
        Math.round(data[dataIndex].percentage) + '%'
      }
      labelStyle={defaultLabelStyle}
    />

Typescript complains with:

Type '({ data, dataIndex }: Props) => string' is not assignable to type 'boolean | (false & LabelPropAsReactElement) | (false & LabelPropAsFunction) | (true & LabelPropAsReactElement) | (true & LabelPropAsFunction) | undefined'.
  Type '({ data, dataIndex }: Props) => string' is not assignable to type 'false & LabelPropAsFunction'.
    Type '({ data, dataIndex }: Props) => string' is not assignable to type 'false'.ts(2322)

...

What is the expected behaviour?

The example works as expected.
...

Steps to Reproduce the Problem

  1. use label={({ data, dataIndex }) => Math.round(data[dataIndex].percentage) + '%'}
  2. Observe the error in VSCode

Specifications

  • Version: 7.3.0
  • Platform: Typescript 3.8.3
majelbstoat commented

This appears to be because the generated types in Chart.d.ts look like:

export declare type Props = typeof ReactMinimalPieChart.defaultProps & {
 // ...
 label?: boolean;
 // ...
}

If I change them to:

export declare type Props = typeof ReactMinimalPieChart.defaultProps & {
 // ...
 label?: LabelProp;
 // ...
}

Typescript doesn't complain anymore.

toomuchdesign commented

Hopefully fixed by v7.3.1.

  • 👍1