typescriptにおけるkeyupイベントの型

この記事の概要

キーアップイベントを拾いevent.target.valueを指定したところ、
静的解析エラーになり、型を指定したら解決したのでその備忘録

バージョン

• angular:8.0.0
• typescript:3.4.5
• eslint:6.8.0

テンプレート

sample.component.html

<input #hogeInput>

何も指定しない場合

sample.component.ts

@ViewChild('hogeInput', { static: true })
input: ElementRef;

hugaFn() {
    const obs$ = fromEvent(this.input.nativeElement, 'keyup')
        .pipe(
            map(event => event.target.value));
}

→「プロパティ 'target' は型 'unknown' に存在しません。」

eventの型を指定してみた

sample.component.ts

map((event: KeyboardEvent) => event.target.value)

→「プロパティ 'value' は型 'EventTarget' に存在しません。」

event.targetの型を指定してみた

sample.component.ts

map((event: KeyboardEvent) => (event.target as HTMLInputElement).value)

解決