如何解决TypeScript错误：Type 'undefined'无法赋值给类型'File'

1. 类中变量类型声明修正 #

TypeScript里File类型默认不允许赋值为undefined，要让变量支持File实例或undefined两种状态，需使用联合类型File | undefined，同时初始化设为undefined即可解决赋值报错：

export class CreateProductoComponent implements OnInit {

  public producto:any = {};

  public file: File | undefined = undefined;
  
  constructor() { 

  }

  ngOnInit(): void {
    
  }

2. 方法中变量的安全处理 #

在fileChangeEvent方法里，当未获取到文件时file为undefined，直接访问file.size会触发空值错误，需先校验file是否存在，再执行后续逻辑：

// 获取输入框中的图片
fileChangeEvent(event:any):void{
  // 校验图片
  let file: File | undefined;

  if(event.target.files && event.target.files[0]){ // 校验是否从输入框获取到图片
    file = <File>event.target.files[0]; // 将文件存入变量
    console.log(file);
  }else{  // 未选择图片的情况
    iziToast.warning({
      title: 'ERROR',
      class: 'text-danger',
      color: 'red',
      position: 'topRight',
      message: '没有选择图片'
    });
    return; // 提前返回，避免后续执行报错
  }

  // 校验图片大小
  if(file.size <= 4000000){
    // 补充文件类型校验逻辑，判断是否为图片格式
    if(file.type.includes('image/')){
      // 符合类型要求的后续处理
    } else {
      iziToast.warning({
        title: 'ERROR',
        class: 'text-danger',
        color: 'red',
        position: 'topRight',
        message: '请选择图片格式的文件'
      });
    }
  }else{
    iziToast.warning({
      title: 'ERROR',
      class: 'text-danger',
      color: 'red',
      position: 'topRight',
      message: '图片大小超过4MB'
    });
  }

}

关键说明 #

• 联合类型File | undefined明确告知TypeScript变量的合法取值范围，解决类型不匹配的赋值错误。
• 未获取到文件时提前return，避免后续访问file.size出现空值异常；同时完善了原代码中缺失的文件类型校验逻辑。

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