什么 Typescript 類型是更改事件？ （角度）

Question

我正在嘗試弄清楚 Angular 項目中使用的更改事件的 Typescript 類型。

代碼很簡單，如下所示：

文件上傳.component.html

<input type="file" (change)="onChange($event)"/>

文件上傳.ts

public onChange(event: Event): void {
  if (event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    console.log(file);
  }
}

將事件鍵入為Event會給我以下 Typescript linting 錯誤：

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

如果不是Event我應該輸入什么？

Answer 1

這是一個事件。 但是您將不得不將您使用的 const 轉換為 HTMLInputElement。

public onChange(event: Event): void {
  if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {
    const [file] = event.target.files;
  }
}

唯一的另一種方法是使用 tsignore 抑制錯誤。 在 react 和 flow 中，它們有一個 SyntheticEvent 類型，您可以鍵入這種特殊情況來繞過它，但 angular 沒有真正的等價物。

Answer 2

public onChange(event: Event): void {
    const input = event.target as HTMLInputElement;

    if (!input.files?.length) {
        return;
    }

    const file = input.files[0];
    console.log(file);
}

Answer 3

你只需要在對你的事件做任何事情之前寫下這個：

if (!(event.target instanceof HTMLInputElement)) return;

然后，Typescript 會知道您的event.target是HTMLInputElement的一個實例，它會停止對您大喊大叫。

Answer 4

這些文件應該可以通過event.srcElement.files屬性訪問。

Answer 5

如果你是React用戶的Typescript並且像我一樣登陸這個線程，這對你有用：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { 
   // do something 
}

Answer 6

您可以將Event的屬性target指定為HTMLInputElement ，使用交集類型作為event的類型提示。

public onChange(event: Event & { target: HTMLInputElement }): void {
  if (event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    console.log(file);
  }
}

交集類型將多種類型組合為一種。 這允許您將現有類型添加在一起以獲得具有您需要的所有功能的單一類型。

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types

Answer 7

接受的答案在我的編譯器中引發了兩個錯誤： (event.target as HTMLInputElement).files is possibly 'null'並且Type 'FileList' must have a '[Symbol.iterator]()' method that returns an iterator 。

這對我有用：

const target = event.target as HTMLInputElement;

if (target.files && target.files.length) {
  const file = target.files[0];
}

Answer 8

我試圖弄清楚在Angular項目中使用了哪種Typescript更改事件。

代碼很簡單，像這樣：

file-upload.component.html

<input type="file" (change)="onChange($event)"/>

file-upload.ts

public onChange(event: Event): void {
  if (event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    console.log(file);
  }
}

將事件鍵入為Event會給我以下Typescript掉毛錯誤：

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

如果不是Event我應該輸入什么？