AngularJS :: 'event.target.value' Error Cause and Solutions

---

AngularJS 를 공부하는 중 input 태그에 이벤트를 다루는 중 해당 이벤트의 값을 가져오지 못하는 오류를 만났습니다.
해당 오류의 원인과 해결 방법을 기록합니다.

---

오류 & 오류 원인

예제 1

<input type="text" (input)="handleInput($event)" />

value = '';
handleInput(event: Event) {
    this. value = event.target.value;
}

예제 2

<input type="text" (keyup)="value=$event.target.value" />

오류가 나는 비슷한 패턴은 예제1 또는 예제2 에서 발생합니다.

오류의 원인은 TypeScript 가 event.target 의 정확한 타입이 무엇인지 모르기 때문에 발생하는 오류입니다.

예를 들어 target 이 HTMLInputElement 인지 HTMLTextareaElement 인지 모른다는 것입니다.

---

해결 방법

오류를 해결하는 방법은 두 가지 방법이 있습니다.

예제 1

value = '';
handleInput(event: Event) {
    this.value = (event.target as HTMLInputElement).value;
}

TypeScript 에게 타입이 무엇인지 알려주는 것

예제 2

<input type="text" (keyup)="value=$any($event.target).value" />

TypeSciprt 에게 이 타입은 어떤 타입이든 될 수 있으니 타입 검사를 하지 말라고 지시하는 것

예제 3 (Angular13 미만)

이 외에 컴파일러 옵션 중 fullTemplateTypeCheck 을 false 로 수정하는 것이 있습니다.

그러나 Angular13 이상부터는 사용되지 않는 옵션이므로 예제1, 2로 해결하는 것을 추천합니다.

---

참고자료

1. Property 'value' does not exist on type 'EventTarget' Error in Angular - TekTutorialsHub

2. Angular - Angular compiler options

---