Property 'item' is missing in type 'File[]' but required in type 'FileList'

Issue

I would like to put files into file type input and then in the class fetch and set. The getter looks like this and it works, but I have a problem with the setter because there is an error: "Property 'item' is missing in type 'File []' but required in type 'FileList'". I created an auxiliary interejs to retrieve specific properties.

interface IFile{
url: string;
name: string;
}

class File{
    [x: string]: any;
   
    get files(): File[] {
        const input = (this.querySelector('[name="Input"]') as HTMLInputElement).files;
        return input as any;
    }

    
    set files(value: File[]) {
        (this.querySelector('[name="Input"]') as HTMLInputElement).files = value;
    }
}

Solution

1. You cannot name your class File. Since File is an interface defined by TypeScript. (Not sure if you are trying to override the native type, which is something I wouldn't recommend). You should change File to something else, eg. InputFile, which would already be helpful.

2. In the line:

const input = (this.querySelector('[name="Input"]') as HTMLInputElement).files;

The type of input variable is FileList.

• FileList is a superset of the type File.

• Hence, you can assign FileList type to File in your getter.

• However, in your setter, you cannot assign a File[] to FileList.

Changing the return type of your getter to FileList and making corresponding changes in your setter should fix the problem.

Ultimately, your class could look something like:

class MyFile {
    [x: string]: any;
   
    get files(): FileList {
        const input = (this.querySelector('[name="Input"]') as HTMLInputElement).files;

        if(input === null) {
          // handle null
          throw Error();
        }

        return input;
    }

    
    set files(value: FileList) {
        (this.querySelector('[name="Input"]') as HTMLInputElement).files = value;
    }
}

I hope this helps!

Answered By - Snigdha Singh