Day 29：开始来学资料系结：使用目前所学，来个简单实作吧！（三）

我们前一篇，虽然有将需求二实作出来，但是看到 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