typescript 如何解决错误:类型“undefined”不能分配给类型“File”

ffdz8vbo  于 2023-05-19  发布在  TypeScript
关注(0)|答案(2)|浏览(593)

我试图使我的文件类型的变量具有未定义的参数,但我得到错误:类型“undefined”不能分配给类型“File”。

export class CreateProductoComponent implements OnInit {

  public producto:any = {};

  public file: File = undefined;
  
  
  constructor() { 

  }

  ngOnInit(): void {
    
  }

当我想在方法中使用变量时,我得到一个错误,说它不能是未定义的。

//Mètode obtenir imatge directe del input
  fileChangeEvent(event:any):void{
    //Validem imatge
    var file;

    if(event.target.files && event.target.files[0]){ //Validem si rebem imatge desde el input
      file = <File>event.target.files[0]; //Guardem l'arxiu en la variable file
      console.log(file);
    }else{  //Si no hi ha imatge
      iziToast.warning({
        title: 'ERROR',
        class: 'text-danger',
        color: 'red',
        position: 'topRight',
        message: 'No hay imágen'
      });
    }

    

    //Validem la mida de la imatge
    if(file.size <= 4000000){
      if(file.type ==){

      }
    }else{
      iziToast.warning({
        title: 'ERROR',
        class: 'text-danger',
        color: 'red',
        position: 'topRight',
        message: 'La imágen supera los 4MB'
      });
    }

  }
lyr7nygr

lyr7nygr1#

错误发生在fileChangeEvent函数中。这里有多个问题,但主要的一个是使用var file告诉TypeScript使用any作为file类型。这是TypeScript的反模式。
该错误特别发生在引用file.size时,因为file可能是undefined(从技术上讲,file可以是 * 任何类型 *)。
下面将解决您遇到的与Type 'undefined' is not assignable to type 'File'相关的错误:
请注意,这里的重要更改是首先检查if (file) ...条件中是否存在file

//Mètode obtenir imatge directe del input
  fileChangeEvent(event:Event):void{
    //Validem imatge
    let file : File | undefined;

    if(event.target.files && event.target.files[0]){ //Validem si rebem imatge desde el input
      file = <File>event.target.files[0]; //Guardem l'arxiu en la variable file
      console.log(file);
    }else{  //Si no hi ha imatge
      iziToast.warning({
        title: 'ERROR',
        class: 'text-danger',
        color: 'red',
        position: 'topRight',
        message: 'No hay imágen'
      });
    }

    

    //Validem la mida de la imatge
    if(file && file.size <= 4000000){
      // TODO: Complete this code
      // if(file.type ==){
      //
      // }
    }else{
      iziToast.warning({
        title: 'ERROR',
        class: 'text-danger',
        color: 'red',
        position: 'topRight',
        message: 'La imágen supera los 4MB'
      });
    }
  }
tvz2xvvm

tvz2xvvm2#

使用问号将属性设置为可选属性,这也使其成为未定义属性。你可以通过不将undefined赋值给变量来保持简单,如果未初始化,它将是未定义的。
https://www.typescriptlang.org/docs/handbook/2/objects.html#optional-properties

export class CreateProductoComponent implements OnInit {

  public producto:any = {};

  public file?: File;
  
  
  constructor() { 

  }

  ngOnInit(): void {
    
  }

相关问题