TypeScript中如何用联合类型正确初始化useState的image字段？

你遇到的问题核心是：

1. 给image赋值''是字符串类型，和接口定义的File | object类型不匹配，所以TypeScript会报错；
2. (File | object)是类型标注语法，不是具体的变量值，不能用来初始化状态。

根据你的接口定义，image是可选属性（带?），同时类型为File | object，这里提供几种正确的初始化方式：

方式一：省略image字段 #

因为image是可选属性，初始化时可以直接不写这个字段，TypeScript会自动识别它为undefined，完全符合接口要求：

const [player, setPlayer] = useState<PlayerInterface>({ name: '', club: '', important: false })

方式二：初始化为空对象 #

空对象{}属于object类型范畴，完全匹配接口里的类型约束：

const [player, setPlayer] = useState<PlayerInterface>({ name: '', club: '', important: false, image: {} })

方式三：显式赋值undefined #

如果需要明确表示当前没有设置image值，也可以直接赋值undefined（可选属性默认允许undefined作为有效值）：

const [player, setPlayer] = useState<PlayerInterface>({ name: '', club: '', important: false, image: undefined })

后续你需要给image赋值File对象时，这几种初始化方式都能正常兼容类型要求。

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