React+TypeScript报TS2322:类型'{ time: number; }'不可分配给number类型

• React 函数组件的第一个入参固定为所有传递属性组成的props对象，你直接为Timer组件的入参声明了number类型，相当于要求整个props对象是数值类型，但实际调用组件时传入的是{ time: 100 }的结构对象，二者类型不匹配，就触发了TS2322编译错误。
• 报错信息里提到的'{ time: number; }'就是你传递给Timer的整个props对象，无法赋值给你声明为number类型的入参，这就是错误的核心原因。

你只需要调整Timer组件的入参类型定义，从props对象里取出time属性使用即可，常见写法如下：

import React from 'react';
import ReactDOM from 'react-dom';

// 先声明组件接收的props类型
type TimerProps = {
  time: number
}

// 入参声明为TimerProps类型，解构出time属性使用
const Timer = ({ time }: TimerProps) => {
  return (
    <div>
      {time}
    </div>
  )
}

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

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

如果组件逻辑非常简单，也可以不用单独定义TimerProps类型，直接在入参位置内联声明类型即可：

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

修改后原组件调用逻辑无需改动，即可正常编译运行。

内容的提问来源于stack exchange，提问作者musako