TypeScript中定义File/FileList类型对象及提取name属性遇问题

你的问题核心是联合类型的类型收窄：string | File类型的变量，TypeScript无法确定它到底是字符串还是File对象，而字符串没有name属性，所以直接访问会报错。以下是几种可行的解决办法：

方法1：使用类型守卫（推荐，安全） #

通过类型判断让TypeScript明确当前变量的类型，从而安全访问name属性：

方式A：typeof判断 #

// 先排除string类型，剩下的自动推断为File
if (typeof form.image !== 'string') {
  console.log(form.image.name); // 这里TypeScript确认是File类型，无报错
}

方式B：自定义类型守卫函数 #

如果需要更复杂的判断逻辑，可以写一个类型守卫函数：

function isFile(value: string | File): value is File {
  // 检查是否存在name属性，以此判断是否为File对象
  return typeof (value as File).name === 'string';
}

// 使用时
if (isFile(form.image)) {
  console.log(form.image.name); // 这里TypeScript确认是File类型
}

方法2：类型断言（不推荐，有风险） #

如果你能100%确定当前form.image是File类型，可以用类型断言强制转换，但如果实际是字符串，运行时会报错：

console.log((form.image as File).name);

补充说明 #

你不需要重新定义File类型，TypeScript已经内置了标准的File类型定义（包含name、size、type等属性），问题出在联合类型的类型不确定上，只要通过类型收窄让TypeScript明确类型即可。

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