[Angular] 解決 Property ‘value’ does not exist on type ‘EventTarget’

在表單設計中經常會使用 user 輸入的值或行為做判斷，例如 input text 的 keyup ，當使用者 key 完放開鍵盤的瞬間觸發該事件，那要怎麼接受到每一次敲打鍵盤傳來的值呢？簡單的範例如下

使用版本：Angular 12.1.1

component.html

<header class="header">
  <h1>todos</h1>
  <input
    class="new-todo"
    placeholder="What needs to be done?"
    autoFocus
    [value]="text"
    (keyup)="changeText($event)"
    (keyup.enter)="addTodo()"
  />
</header>

(keyup) 是 Angular 事件繫結(event binding)的語法，用括弧包起來，透過 $event 物件作為引數傳給 changeText() 方法。

component.ts

import { Component } from "@angular/core";

@Component({
  selector: 'app-todos-header',
  templateUrl: './header.component.html',
})
export class HeaderCompnent {
  text: string ='';
  changeText(event: Event): void{
    console.log(event.target.value);
  }

  addTodo(): void {
    console.log('addTodo',this.text);
  }
}

出現 value 不屬於 EventTarget 的錯誤

因為 $event 上述的例子皆屬於 HTMLElement，可以代表任何一個 HTML 元素，表示不一定存在於 $event.target。

HTMLElement 參考連結

解法一：event interface 改為 any 或不加

不推薦的解法，只是讓他跟沒有強型別一樣。

  changeText(event:any): void{
    console.log(event.target.value);
  }

解法二：用 as keyword 把 event.target 轉型為 HTMLInputElement

型別斷言（Type Assertion），用 as 關鍵字指定一個型別。

event.target as HTMLInputElement; => 指定為 HTMLInputElement 型別。

  changeText(event: Event): void{
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  }

解法三：用泛型（Generics），<HTMLInputElement>

其實跟二應該差不多，一樣可解決

  changeText(event: Event): void{
    const target = <HTMLInputElement>event.target
    this.text = target.value;
    console.log(target.value);
  }

上述兩項目的都是要讓 Typescript 知道傳進來的 type 是什麼。