文件上传TS报错property originTypeObj does not exist on type "{}"求解

报错场景 #

上传文件构造FormData参数时，TypeScript抛出类型错误：
property originTypeObj does not exist on type "{}"
触发报错的代码：

formData.append("front_img", new Blob([front_img.originTypeObj as any]));
formData.append("back_img", new Blob([back_img.originFileObj as any]));

报错原因是TS默认将初始值为空对象{}的变量推导为{}类型，该类型上不存在originTypeObj、originFileObj自定义属性，需要手动给变量补充类型声明。

推荐解法：定义对应接口标注类型 #

先根据你使用的上传组件返回的文件对象结构，定义对应的类型接口：

interface UploadFileItem {
  originTypeObj?: Blob | File;
  originFileObj?: Blob | File;
  // 可根据实际业务用到的属性补充字段，比如文件名、上传状态、唯一标识等
  uid?: string;
  name?: string;
  status?: 'uploading' | 'done' | 'error' | 'removed';
}

之后给front_img、back_img两个变量标注上述类型即可，TS就能正确识别属性，不需要再写as any绕过校验：

// 普通JS变量直接标注类型
const front_img: UploadFileItem = {};
const back_img: UploadFileItem = {};

// 如果是Vue3 ref定义的变量，按如下写法标注类型
// const front_img = ref<UploadFileItem>({});
// const back_img = ref<UploadFileItem>({});

// 普通变量使用
formData.append("front_img", new Blob([front_img.originTypeObj]));
formData.append("back_img", new Blob([back_img.originFileObj]));

// ref变量需要取.value使用
// formData.append("front_img", new Blob([front_img.value.originTypeObj]));
// formData.append("back_img", new Blob([back_img.value.originFileObj]));

如果你使用的是成熟的第三方UI组件库（比如Ant Design、Element Plus）的上传组件，不需要自己手写接口，直接导入组件库自带的文件类型即可：

// 以Ant Design Vue为例，其他组件库参考对应文档导入类型
import type { UploadFile } from 'ant-design-vue/es/upload/interface';

const front_img = ref<UploadFile>({});
const back_img = ref<UploadFile>({});

临时快速解法（不推荐生产环境使用） #

如果只是临时调试不想写完整类型，可以在访问属性时做类型断言，临时告诉TS该对象的结构：

formData.append(
  "front_img", 
  new Blob([(front_img as { originTypeObj: Blob | File }).originTypeObj])
);
formData.append(
  "back_img", 
  new Blob([(back_img as { originFileObj: Blob | File }).originFileObj])
);

注意：这种写法会丢失TS的类型校验能力，如果属性名拼写错误不会有提前提示，容易引发线上问题，仅适合临时调试场景。

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