TypeScript错误：类型“…”不能分配给类型“ IntrinsicAttributes＆Number”

Question

Newbie to TypeScript I try to port a JS code to TS and I get the error

[ts]
Type '{ current: number; total: number; }' is not assignable to type 
'IntrinsicAttributes & Number'.
  Type '{ current: number; total: number; }' is not assignable to type 
'Number'.
Property 'toFixed' is missing in type '{ current: number; total: number; }'.
(JSX attribute) current: number

The function

function Header(current: number, total: number, question: DEEP_QUESTION){
//  console.log("Header " + current.toString());
  return (
      <div> 
        <StepBar current={current} total={total} />
        <SurveyTheme theme={question.theme} />
      </div>
  )
  //refresh();
}

The messages appears on the StepBar call parameters. The signature of StepBar

function StepBar(current: number, total: number) {

This works in JS

Any idea ?

Answer 1

StepBar should accept a props object with members as current and total.

Can you try using something like :

function StepBar(props: {current: number, total: number}) { ... }

Answer 2

You can use React.StatelessComponent generic to pass your prop types as follows:

interface IHeaderProps {
    current: number;
    total: number;
 }

const Header:React.StatelessComponent<IHeaderProps> =  (props) => {
  return (
    ...
  )
}