TypeScript中如何为React组件props的onChange函数参数指定布尔类型？

TypeScript错误码2345在此处触发的核心是：声明onChange函数类型时，你没有给入参对象中的isFoo1、isFoo2字段标注明确类型，TypeScript会将未标注类型的解构参数判定为隐式any类型，和调用时传入的布尔类型不匹配，因此抛出类型错误。

有两种常用的声明方式，可根据场景选择：

方式1：直接内联标注类型 #

适合入参结构简单、不会复用的场景：

const MyComponent: React.FC<{
  // 给解构的入参对象明确标注结构类型
  onChange: ({ isFoo1, isFoo2 }: { isFoo1: boolean; isFoo2: boolean }) => void;
}> = ({ onChange }) => {
    const [isFoo1, setIsFoo1] = useState<boolean>(false);
    const [isFoo2, setIsFoo2] = useState<boolean>(false);
  
    /*
    * 业务逻辑...
    */

    // 注意：原代码useEffect第一个参数必须传回调函数，已修正语法错误
    useEffect(() => {
      onChange({isFoo1, isFoo2})
    },[isFoo1, isFoo2])
}

方式2：抽离类型别名 #

适合入参结构复杂、后续可能扩展或者需要复用类型的场景，可维护性更高：

// 单独抽离onChange入参的类型定义
type ChangeParams = {
  isFoo1: boolean;
  isFoo2: boolean;
}

const MyComponent: React.FC<{
  onChange: (params: ChangeParams) => void;
}> = ({ onChange }) => {
    // useState传入布尔默认值时TS可自动推断类型，无需额外标注
    const [isFoo1, setIsFoo1] = useState(false);
    const [isFoo2, setIsFoo2] = useState(false);
  
    useEffect(() => {
      onChange({isFoo1, isFoo2})
    },[isFoo1, isFoo2])
}

你原代码中useEffect第一个参数直接写对象属于语法错误，必须传入回调函数，上述修正代码已经做了调整。

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