为何TypeScript类型收窄在此场景下无法生效？

你遇到的问题核心是：TypeScript的类型收窄默认只针对单个属性，而非整个对象。

当你在handleSubmit里判断formData.image为真时，TypeScript只会把formData.image的类型单独收窄为File，但整个formData的类型依然保持{ image: File | null }——因为TypeScript无法自动推断“只要image属性是File，整个对象就符合{ image: File }的类型”。

几种解决方法： #

• 直接传递收窄后的属性：既然formData.image已经被收窄成File，可以直接构造符合uploadImage参数要求的对象传入：

function handleSubmit(formData: { image: File | null }) {
    if (formData.image) {
        uploadImage({ image: formData.image })
    }
}

• 使用类型断言：明确告知TypeScript当前formData的类型符合要求（注意：需确保运行时formData.image确实不为null，否则可能引发错误）：

function handleSubmit(formData: { image: File | null }) {
    if (formData.image) {
        uploadImage(formData as { image: File })
    }
}

• 自定义类型守卫：编写一个类型守卫函数，让TypeScript能正确识别整个对象的类型：

function hasValidImage(formData: { image: File | null }): formData is { image: File } {
    return !!formData.image;
}

function handleSubmit(formData: { image: File | null }) {
    if (hasValidImage(formData)) {
        uploadImage(formData)
    }
}

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