[TypeScript] File 타입과 FileList 타입

타입스크립트엔 File이란 타입이 있다.

 

 

예를들어 위처럼 이미지들을 업로드 할수있는 컴포넌트를 하나 만들었다고 생각해보자.

 

const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {   

    const files = e.target.files;
    
  };

해당 input태그에 onChange이벤트를 건 후에, files를 찍어볼 수 있다.

 

그렇다면 이 files의 타입은 무엇일까??

 

 

이미지 개개인별로의 타입은 File이며, 위처럼 여러개를 묶어진 경우에 FileList란 타입으로 지정되게 된다.

 

 

 

https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.filelist.html

FileList | typescript - v3.7.7

 

 

FileList의 속성은 위 페이지에서 조금더 자세히 볼 수 있다.

 

length,item 등등의 속성을 통해 파일의 개수나, 각각의 파일에 접근할 수 있다.

 

 

이 FileList는 배열이지만, 배열이 아니다

 

무슨소리인가 하면, length도 있고 index로 각 아이템에 접근도 가능하지만, map,filter,forEach등의 함수를 사용할 수 없다.

 

따라서 해당 함수들을 사용하려면

 

const blobFile = Array.prototype.forEach.call(files, function(file) {
      tmpFile.push({ file: file, blobFile: URL.createObjectURL(file) });
    });

위처럼 Array배열의 prototype에서 가져와서 사용해야 한다.

 

(위예제는 가져온 파일들을 blob으로 바꿔 임시url을 생성할 수 있게 한 코드이다.)

 

 

 

 

또한, 타입스크립트를 사용할때 유의할 점이 있다.

 

필자는 파일 업로드한 파일들을 묶은 리스트를 만들고 싶었는데, 처음에 이 타입들에 대해 잘 이해하지 못한 상태로

 

 

fileList : FileList[]

처럼 넣어주었다. 사실, 파일들을 담긴 새로운 배열을 만드려면

 

 

fileList : File[]

이란 타입이 맞을 것이다. 실제로 첫번째 방법대로 하면, file.name등의 파일속성에 접근할 수 없다.

 

 

 

그런데 타입스크립트에서 File과 FileList타입이 다른데도 에러를 일으키지 않는 이슈가 발생하였다... FileList[]로 설정해 둔 상태로 File을 넣어도 오류를 일으키지 않았다... File타입이 들어가있음에도 FileList로 타입을 인지해 file.name등의 속성은 접근할수 없는 현상이 발생하였다.

 

따라서 이부분을 생각할때 타입스크립트를 너무 믿지 않고 직접 생각해보는 과정이 필요할 것 같다.