Day 26：开始来学资料系结：事件系结（三）今天的 $event 有型别呢！

昨天我们有稍微提到，使用 $event 的 property 时，要注意大小写的问题，虽然只是轻轻带过，但是以往有写过 JavaScript 的开发者，肯定有遇到过打错字（or 打错大小写）导致程序出错的经验，这不仅困扰，而且很不容易解决。

这也间接带出了 Angular 开发的优点，开发 Angular 使用的是 TypeScript，用白话一点讲 TypeScript 是 JavaScript 的超集合，因此 TypeScript 就是 JavaScript，而且，还是具有型别的 JavaScript！

我们很久没提到 TypeScript 了，如果感到有点陌生，可以回去参考 Day 07：开发 Angular 一定要会的 TypeScript 哦！

那具有型别有什麽好处呢？好处很多，也时常有人在赞扬，不过，我们还是直接示范，会比较清楚！

从前一篇的文章，我们可以知道 $event 传入的型别是 PointerEvent。

那我们就可以到 AppComponent 中为 $event 加上型别啦！

昨天我们为了示范，其实已经有为 $event 加上一个 any 的型别，但使用 any 则完全舍弃了型别的优点，有加跟没加一样，因此开发时还是建议尽可能不要使用 any 型别哦！

而加上型别的好处，就是当我们想要运用 $event 的 property 时，就有好用的 intellisense 来当我们开发的最佳助攻啦！

当我们以为一切顺利时，在 HTML 却喷出错误。

虽然型别是 PointerEvent，错误讯息却显示 $event 这个参数是属於 MouseEvent 型别，无法指派 PointerEvent 型别，因此，在这里我们要改成使用 MouseEvent 才能正确运作。

PointerEvent 的 porperties 是继承自 MouseEvent，可以参考 MDN 的说明：PointerEvent

当然，好用的 intellisense 依然正常发挥，这个不怕打错字的好处，当然就可以大大改善开发效率罗！

来到网页，按着 shift 键并点击 img，我们可以得到与昨天相同的结果。

这里，我们还有另一种写法，我们可以再来重构一下！首先，先把 AppComponent 里的 $event.shiftKey 剪下。

到 HTML Template 的地方把 $event 取代。

此时，AppComponent 中的程序码，型别就要更改，从 HTML 的错误提示来看，我们可以知道 $event.shiftKey 的型别是 boolean。

所以我们需要把 AppComponent 中的程序码改成如下：

上图最後一行的 console.log 就可以拿掉了，以免产生错误。

再次回到网页，进行同样的操作，标题仍然会改变！

而这两种写法，无法说谁好谁坏，第一种写法，传入整个 $event，在操作上保有更多弹性，而第二种写法，不传入 $event 只传入 boolean 值，显得更简单易读，各有优缺点，端看开发的需求为何。

以上，就是关於型别优点的简单分享，我们下一篇再见！