为何已做null检查仍出现'event.target.files'可能为null的TS报错？

核心原因 #

• TypeScript的类型守卫对嵌套属性的跟踪有作用域限制。event.target.files是DOM元素的嵌套属性，当你在some方法的回调里访问它时，TypeScript无法保证这个属性在回调执行时仍保持非空状态——因为回调可能在当前函数的同步逻辑之后执行，外部环境（比如浏览器）有可能修改event.target的属性值。所以即便你之前做了null和长度检查，TypeScript依然会认为它可能为null。
• 把event.target.files[0]存入局部变量后，TypeScript能确定这个变量在当前函数的同步执行流中不会被外部修改，因此可以正确保留类型收窄的结果，变量会被推断为非空的File类型，自然不会再报错。

代码对比 #

仍会报错的写法

const handleOnUpload = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files === null || event.target.files?.length === 0) return;
    // 必须用!断言才能消除报错
    if (allowedExtensions.some((extension) => event.target.files![0].type === extension)) {
        // ...业务逻辑
    }
    // ...其他代码
}

无报错的写法

const handleOnUpload = (event: ChangeEvent<HTMLInputElement>) => {
    if (event.target.files === null || event.target.files?.length === 0) return;
    // 赋值给局部变量，TypeScript自动推断正确类型
    const uploadedImage = event.target.files[0];
    if (allowedExtensions.some((extension) => uploadedImage.type === extension)) {
        // ...业务逻辑
    }
    // ...其他代码
}

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