Typescript+React中传递Date对象给子组件报类型错误如何解决？

React 函数组件的第一个入参固定为整个props对象，你在ExpenseDate子组件中直接将入参类型定义为Date，相当于把父组件传入的{ date: Date }格式的props对象，直接当作Date类型处理，二者类型不匹配，因此触发TS校验报错。
报错提示本质是告知：子组件期望接收的参数是Date类型，但实际传入的是带date属性的props对象，类型无法兼容。

共有两种常用修复方式，选择任意一种即可：

方式1：直接解构props（简易写法，适合props较少的场景） #

直接修改ExpenseDate子组件的入参定义，从props对象中解构出date字段，同时标注类型：

import './ExpenseDate.module.css';
// 调整入参为解构写法，标注props中date字段的类型
const ExpenseDate = ({ date }: { date: Date }) => {
   const month = date.toLocaleString('en-US', {month: 'long'});
   const day = date.toLocaleString('en-US', {day: '2-digit'});
   const year = date.getFullYear();

   return (
      <div className="expense-date">
         <div className="expense-date__month">{month}</div>
         <div className="expense-date__day">{day}</div>
         <div className="expense-date__year">{year}</div>
      </div>
   )
};
export default ExpenseDate;

方式2：提前定义Props类型（规范写法，适合props较多、可复用性要求高的场景） #

先单独定义子组件的Props类型，再绑定到组件入参上：

import './ExpenseDate.module.css';

// 先定义子组件的Props类型
type ExpenseDateProps = {
  date: Date
}

const ExpenseDate = ({ date }: ExpenseDateProps) => {
   const month = date.toLocaleString('en-US', {month: 'long'});
   const day = date.toLocaleString('en-US', {day: '2-digit'});
   const year = date.getFullYear();

   return (
      <div className="expense-date">
         <div className="expense-date__month">{month}</div>
         <div className="expense-date__day">{day}</div>
         <div className="expense-date__year">{year}</div>
      </div>
   )
};
export default ExpenseDate;

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