输入'{percentage：number; }'不能为CircularProgressbar分配React Typescript

Question

Hi I am going to use the React CircularProgressbar in my application. I followed the step as mentioned in the below link.

https://github.com/kevinsqi/react-circular-progressbar

I am creating the component using the Typescript , But I am getting the error and code as below. Great appreciate.

import * as React from 'react';
import CircularProgressbar from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
 export default function CircularProgressBar(props: {percentageVal: number, textVal: string}) {  

  return (<div>    
    <CircularProgressbar
      percentage={props.percentageVal}
      text={props.textVal}
    />
    </div>);
}

Error: semantic error TS2322 Type '{ percentage: number; text: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' .

Answer 1

I'm the author of react-circular-progressbar - sorry you're running into issues. Based on the props, I assume you're on version 1.xx of react-circular-progressbar?

Here's a react + typescript CodeSandbox which uses v1.2.1, and does compile with the code you're using without the same error: https://codesandbox.io/s/reactcircularprogressbar-stackoverflow-56038279-v121-cris9

Could you reproduce the error in a CodeSandbox or a small typescript create-react-app repo? Would be really helpful for diagnosing the issue. You could also try updating to v2.0.0.