CODEWITHSUNDEEP
javascriptreactjstypescript
carella
carella

Reputation: 81

TypeScript error : Type '.....' is not assignable to type 'IntrinsicAttributes & Number'

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 ?

Upvotes: 2

Views: 2009

Answers (2)

Sandeep Gupta
Sandeep Gupta

Reputation: 7250

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 (
    ...
  )
}

Upvotes: 0

lorefnon
lorefnon

Reputation: 13105

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}) { ... }

Upvotes: 5

Related Questions