Day 17 中场休息，来做点酷东西（取值 & 验证）

那我们继续吧！

上面做了取得 DOM 元素，也就是三个 input 的值的动作：

1. 在 class 设置 field
2. 把抓取到的 DOM 元素存到相对应的 field 里面
3. 监听表单 submit 的动作，event handler 也呼叫了一个 submitHandler() 函式!

接下来呢，会发现跟 Decorator Part - 3 一样，由於 this 指向的关系，没有用 JavaScript 的 bind 方法会导致取得的值会是 undefined，於是这里又再练习了一次 Method Decorator！红色毛毛虫的部分是因为 vsCode 提醒说要记得把 tsconfig.json 里头的 "experimentalDecorators" 打开啦～要记得哦～

在 submitHandler() 里面呼叫了 gatherUserInput() 来获得三个 input 的值，再来要做的是表单验证以及取值的部分，以下做了几件事情：

1. 建立了验证用的 Interface
2. 把验证的功能拉出来单独做了一个 Function
3. 使用 Interface 建立了三个 input 的物件
4. 用 validate() 做好验证之後就会返回装有三个 input 值的阵列

这里有几件要注意的事情：

1. 一开始只有设定 gatherUserInput() 要返回的型别是 tuple，但是在第一个 if 验证是不是没填资料时因为第一个判断没有返回值，就会被报一个错误提醒说缺少一个 ending 的 return 述句，而且也没有再定义函式会返回 undefined。
2. 这时如果再第一个判断是写 return 把它终结掉，又会跳出一个错误提醒是 undefined 没有被指派给这个函式的返回值
3. 这时在返回值的地方再用上 Union 型别，加上 void 就可以了，注意不是设定成 undefined 哦，void 是指函式就算没返回值也没关系。
4. 第二个判断式 return 的阵列，原本最後一个 enterPeople 也会被报错，因为 DOM 的 input 预设都会是字串，简单在前面加一个 +，把值转成数字就可以了。

这样做的话让 validate() 函式变得可以重复使用，可以减少程序码的行数，也达到了把每一个功能都分开写的目的，让程序码可以比较好的去维护。

哇，写到现在时间快到了，今天的学习笔记就到这边～谢谢阅读。：）