Type '{ time: number; }' is not assignable to type 'number'. TS2322-CodePudding

I would like to create something that takes a number and outputs that number as is, as shown in the code below. However, when I enter a number type, it does not compile.

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';

const Timer = (time: number) => {
    // const time: number = 100;
    return (
        <div>
            {time}
        </div>
    )
}

const  App = () => {
    const a: number = 100;
    return (
        <Timer  time={a} />
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

The error we got is as follows.

Failed to compile.

/~~/project_name/src/index.tsx
TypeScript error in /~~/project_name/src/index.tsx(17,10):
Type '{ time: number; }' is not assignable to type 'number'.  TS2322

    15 |     const a: number = 100;
    16 |     return (
  > 17 |         <Timer  time={a} />
       |          ^
    18 |     )
    19 | }
    20 |

CodePudding user response：

props is of type object, not of type number

Live Demo

const Timer = ({ time }: any) => {
  // const time: number = 100;
  return <div>{time}</div>;
};