如何在React中判断数组元素是FileProps还是File类型？

可以通过以下几种方式在files.map中准确判断元素类型：

1. 自定义类型守卫函数（TypeScript推荐） #

如果使用TypeScript，定义一个类型守卫函数来明确推断类型：

// 先定义类型守卫
function isFileProps(file: File | FileProps): file is FileProps {
  // 检查是否存在FileProps特有的fileId属性
  return (file as FileProps).fileId !== undefined;
}

// 在map中使用
files.map((file) => {
  if (isFileProps(file)) {
    return <div>{file.fileId}</div>;
  } else {
    // 此时TypeScript会自动推断file为File类型，可直接使用其属性
    return <div>{file.name}</div>;
  }
})

2. 直接检查属性存在（简单快捷） #

利用in操作符判断元素是否包含FileProps独有的属性（比如fileId）：

files.map((file) => {
  if ('fileId' in file) {
    return <div>{file.fileId}</div>;
  } else {
    // 这里file是原生File对象，可访问name、type等属性
    return <div>{file.name}</div>;
  }
})

3. 使用instanceof判断原生File类型 #

原生File对象可以通过instanceof直接识别：

files.map((file) => {
  if (file instanceof File) {
    // 处理原生File对象
    return <div>{file.name}</div>;
  } else {
    // 处理自定义的FileProps类型
    return <div>{file.fileId}</div>;
  }
})

注意事项 #

• 如果FileProps和File有重叠属性，优先用类型守卫或更独特的属性来区分
• 若在纯JavaScript环境中，上述方法同样适用，只是没有TypeScript的类型推断支持

内容的提问来源于stack exchange，提问作者Алексей Ганин