TypeScript中接口定义导入图片作为props时应指定什么数据类型

解决方案 #

通过import导入的静态图片资源，在webpack/Vite等前端构建工具的处理下，最终导出的值是图片打包后的线上路径字符串，而非File对象或DOM元素，所以你需要把对应属性的类型设置为string。

你之前使用File类型报错的原因是，File类型对应的是本地文件对象（比如通过input type=file选择文件得到的对象），和导入图片得到的字符串类型完全不匹配，所以触发了类型错误。

修改后的interface代码 #

把EventData接口中的eventImage字段类型改为可选字符串即可：

interface EventData {
  eventName: string;
  eventDate: string;
  eventDistance: string;
  eventImage?: string;
}

补充说明（可选） #

如果你的项目没有默认配置静态资源的类型声明，出现找不到模块“*.jpg”或其相应的类型声明的报错，可以在项目src目录下新增images.d.ts类型声明文件，写入以下内容：

declare module '*.jpg' {
  const src: string;
  export default src;
}
declare module '*.png' {
  const src: string;
  export default src;
}
declare module '*.jpeg' {
  const src: string;
  export default src;
}
declare module '*.gif' {
  const src: string;
  export default src;
}

添加后TS就能正确识别各类图片格式的导入类型了。

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