React TypeScript中为函数参数对象定义类型的正确方式（避免any）

你已经定义了DataObj接口，这就是toggleShow函数参数应该用的类型，完全不需要用any。以下是修正后的代码和说明：

关键修改点： #

• 将toggleShow函数的参数类型从any改为DataObj，匹配setData接收的状态类型，TypeScript会自动校验参数结构是否符合要求。
• 修正PropsFunction接口中toggleShow的参数类型，从object改为DataObj，保证接口定义和实际函数实现的类型一致。
• 修复useState初始化时body字符串未闭合的语法错误。

export interface DataObj {
  label: string;
  image: string;
  body: string;
}

interface PropsFunction {
  toggleShow: (item: DataObj) => void; // 把object替换为DataObj
  data: DataObj;
  show: boolean;
  setShow: React.Dispatch<React.SetStateAction<boolean>>;
}

const Test = () => {
  const [show, setShow] = useState<boolean>(false);
  const [data, setData] = useState<DataObj>({
    label: "",
    image: "",
    body: "", // 修复字符串未闭合问题
  }); 

  // 参数类型改为DataObj
  const toggleShow = (data: DataObj) => {
    setShow(!show);
    setData(data);
  };
};

如果你的toggleShow需要支持传入函数形式的参数（比如(prevData) => ({...prevData, label: 'new'})），可以把参数类型改成React.SetStateAction<DataObj>，提升灵活性：

const toggleShow = (data: React.SetStateAction<DataObj>) => {
  setShow(!show);
  setData(data);
};

同时同步修改PropsFunction的对应定义：

interface PropsFunction {
  toggleShow: (item: React.SetStateAction<DataObj>) => void;
  // ...其他属性
}

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