我們前一篇，雖然有將需求二實作出來，但是看到 keyCode 已被淘汰的訊息，還是覺得有點不痛快。

上網搜尋了一下，找到一篇其他開發者分享的文章： [從 0 開始的 Angular 生活]No.16 實作練習，裡頭提到了另一種寫法，我們就參考裡頭的寫法並實作、改寫看看。

先到 HTML 來改寫一下，將原本的程式碼：

(keyup)="clearText($event)

改寫成如下：

(keydown.escape)="clearText($event)

這一段我們是使用 keydown 事件中的 escape property（也就是按下 esc 鍵的意思），來觸發 clearText 方法，此時我們會看到有錯誤訊息出現。

也就是 Event 型別的參數，無法指派給型別 KeyboardEvent。

接著我們來到 AppComponent 改寫一下程式碼，將原本的型別從 KeyboardEvent 改成 Event。

根據 MDN：KeyboardEvent 的資料顯示，KeyboardEvent 介面（interface）亦繼承其父， UIEvent 和 Event 的 methods，有興趣理解的朋友，可以參考看看。

此時，HTML 的錯誤也消失了。

接著我們來完成 AppComponent 裡 clearText 方法的程式碼。

也就是當我們按下 esc 鍵時，input 的 value 會清空，value 的 length 也會歸零。

先來到網頁，輸入幾個字元，字元數計算的功能正確運作。

接著按下 esc 鍵，就可以看到 input 的內容確實被清空了，而字元數也變為 0 了。

以上，就是我們以前一篇寫法為基礎，修改而成，沒有錯誤的結果，供各位參考。

本篇寫法，如果有前輩、朋友能協助解釋，並且在現有寫法基礎下，提供修正的解法，還請不吝指教，謝謝！若我之後有找到想關的資訊、解法，也會更新在本文章中。

參考來源

• [從 0 開始的 Angular 生活]No.16 實作練習

• stackoverflow：Typescript keyboard event : argument of type 'Event' is not assignable to parameter of type 'KeyboardEvent'

• MDN：KeyboardEvent