TypeScript报错(2322)：'(activeTabIndex: number) => void'无法分配给'() => number'类型

你遇到的TS2322报错是因为透传的onChange函数声明类型和实际传入的函数类型不匹配：

• 你在Tabs、PageHero组件中声明的onChange类型是() => number：无入参，返回值为数字类型
• 你在BIM组件中定义的handleTabClick实际类型是(activeTabIndex: number) => void：接收一个数字入参，无返回值

1. 修改Tabs组件 #

调整Props中的onChange类型，同时给按钮点击事件补充参数传递：

interface Props {
  firstTabContent?: React.ReactNode;
  secondTabContent?: React.ReactNode;
  // 修改onChange类型：接收数字参数，无返回值
  onChange?: (activeTabIndex: number) => void;
  activeTabIndex?: number;
}

const Tabs = ({
  firstTabContent,
  secondTabContent,
  onChange,
  activeTabIndex,
}: Props) => {
  return (
    <div className="c-tabs">
      <ul className="c-tabs__list">
        <li className="c-tabs__item">
          <button
            // 点击时传递当前Tab的索引，可选链调用避免onChange未传时报错
            onClick={() => onChange?.(1)}
            className={
              activeTabIndex === 1 ? "c-tabs__btn" : "c-tabs__btn--active"
            }
          >
            Tab 1
          </button>
        </li>
        <!-- 第二个Tab同理补充点击传参 -->
        <li className="c-tabs__item">
          <button
            onClick={() => onChange?.(2)}
            className={
              activeTabIndex === 2 ? "c-tabs__btn" : "c-tabs__btn--active"
            }
          >
            Tab 2
          </button>
        </li>
      </ul>
    </div>
  )
}

2. 修改PageHero组件 #

调整Props中的onChange类型，和Tabs组件保持一致即可：

export interface Props {
  title?: string;
  date?: string;
  description?: string;
  entries?: string;
  // 修改onChange类型，和Tabs对齐
  onChange?: (activeTabIndex: number) => void;
  activeTabIndex?: number;
}

3. BIM组件无需修改 #

你当前定义的handleTabClick已经符合调整后的类型要求，保存后报错会自动消失。

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