此antd库组件在将Javascript转换为typescript时出错

它位于handleChange函数中，而setState{imageUrl}

当我只使用javascript时，会显示imagepreview，但会在typescript中显示错误

import{Upload，Icon，message}来自“antd”；
函数getBase64（img:any，callback:any）{
const reader=new FileReader（）；
reader.addEventListener（“加载”，（）=>回调（reader.result））；
reader.readAsDataURL（img）；
}
上传前功能（文件：任意）{
const isJPG=file.type==“image/jpeg”；
如果（！isJPG）{
message.error（“您只能上载JPG文件！”）；
}
const isLt2M=file.size/1024/1024<2；
如果（！isLt2M）{
错误（“图像必须小于2MB！”）；
}
返回isJPG&&isLt2M；
}
函数Avatar（）{
常量初始状态={
加载：错误
};
const[state，setState]=React.useState（initialState）；
const handleChange=（信息：任意）=>{
如果（info.file.status==“上传”）{
setState（{…状态，加载：true}）；
回来
}
如果（info.file.status==“完成”）{
//从现实世界中的响应获取url。
getBase64(
info.file.originFileObj，
（imageUrl:any）：any=>setState（{…state，
imageUrl，//此处显示错误，但在javascript中工作正常
加载：false}）
);
}
};
常量上载按钮=(
上载
);
const{imageUrl}:any=状态；
返回(
{imageUrl？：上传按钮}
);
}

---

这个antd库组件在将Javascript转换为typescript时出错，

问题是React.useState根据传入的initialState值推断它管理的状态值的类型。那么你有什么：

const initialState = {
  loading: false
};
const [state, setState] = React.useState(initialState);

如果将state/setState悬停在Codesandbox中，可以看到推断的状态类型是

{
  loading: boolean
}

此状态类型中没有imageUrl字段，因此尝试设置该字段是非法的

有多种方法可以告诉Typescript状态也可以有一个

imageUrl

字段。一种方法是用所需的类型显式地注释initialState。另一种方法是注释

React.useState

调用本身

interface AvatarState {
  loading: boolean;
  imageUrl?: string;
}
...
const initialState: AvatarState = {
  loading: false
};
const [state, setState] = React.useState(initialState);

接口虚拟状态{
加载：布尔；
imageUrl？：字符串；
}
...
常量初始状态={
加载：错误
};
const[state，setState]=React.useState（initialState）；

interface AvatarState {
  loading: boolean;
  imageUrl?: string;
}
...
const initialState: AvatarState = {
  loading: false
};
const [state, setState] = React.useState(initialState);

interface AvatarState {
  loading: boolean;
  imageUrl?: string;
}
...
const initialState = {
  loading: false
};
const [state, setState] = React.useState<AvatarState>(initialState);