为输入类型文件键入 onChange 处理程序的正确方法是什么？

Question

Almost like Property 'files' does not exist on type 'EventTarget' error in typescript

What's the correct way to type an onChange handler for input type files?

<input
        id="myInput"
        type="file"
        ref={inputEl}
        onChange={onChangeFile}
      />

///
const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.stopPropagation();
    event.preventDefault();
    const files = Array.from(event.target.files);
    const arr = files.filter((file: any) => imageTypesRegExp.test(file.type));
  };

Which throws errors like:

Property 'files' does not exist on type 'EventTarget'.

for the event.target.files and

Object is of type 'unknown'.

for the file.type

Answer 1

Disclaimer: I'm unfamiliar with React/ReactJS, so I'm using only the DOM Event interface .

• You need to cast event.target (or event.currentTarget ) to HTMLInputElement .
• This is because the Event interface is not generic (so the type of target or currentTarget cannot be specified).

Like so:

const onChangeFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.stopPropagation();
    event.preventDefault();
    const input = event.target as HTMLInputElement; // <-- here
    const files = Array.from(input.files);
    const arr   = files.filter((file: any) => imageTypesRegExp.test(file.type));
};

---

As an aside, you don't need this event-handler at all if you want to filter files by MIME type or file-extension, instead use the <input accept="" /> attribute , like so:

• Only JPEG and PNG images:

   <input type="file" accept="image/jpeg, image/png" />

• Any image:

   <input type="file" accept="image/*" />

• Only video:

   <input type="file" accept="video/*" />