Typescript Step 2: Prototypes to Classes 1🔥
บทเรียนของรอบนี้คือ "Your job is to port that code to proper ES2015+ `class` classes." การแปลงคลาสแบบเก่าให้เป็นไปตามหลัก ECMAScript ในเวอร์ชันปัจจุบัน ซึ่งในเนื้อหาต่อไปนี้จะแสดงให้เห็นว่าอ่านง่าย และ เขียนง่ายกว่ามาก
โดยโจทย์ที่ให้มาคือ ฟังก์ชัน Robot and Humanoid โดยเราจะต้องแปลงโค้ดจากไฟล์ ที่ให้มาให้ถูกตามหลักการสร้างคลาสแบบปัจจุบัน
จากรูปข้างบนจะเห็นได้ว่าเราจะเปลี่ยนจาก function เป็น class และมี constructor ที่รับค่า attribute(name, abilities)
ส่วนถัดมาจะเปลียนจาก
Robot.prototype.fn_name = function fn_name() ➡️ fn_name()
เช่น
Robot.prototype.announce = function announce() ➡️ announce()
โดยโค้ดการทำงานภายในของฟังก์ชันนั้นยังเหมือนเดิม
ส่วนรูป 2 จะเป็นวิธีการสร้างคลาส Humanoid ซึ่งมี Robot เป็น parent โดย Humanoid นั้นจะมีฟังก์ชันการทำงานเหมือนกับ Robot ทั้งหมด แต่จะมีฟังก์ชันเพิ่มมาที่เป็นเอกลักษณ์ของตัวเอง
จากรูปที่ 2 ของด้านบนจะเห็นได้ว่า ในกรอบสีแดงจะเป็นการคลาส humanoid โดยมี constructor คือ name, abilities, and catchphrase. ส่วนลูปด้านล่างจะเป็นคัดลอก method ของ robot สู่ humanoid
ส่วนในกรอบสีเหลือง จะเป็นการเพิ่ม announce method สู่ humanoid ซึ่งจะพิมพ์ข้อความเหมือนกับ robot แต่เพียงจะมีการเพิ่ม catchphrase เข้ามาด้วยนั้นเอง ซึ่งจะสังเกตุได้ว่าการเขียนแบบที่สองนั้น อ่านง่าย เขียนง่าย เข้าใจง่าย และรวดเร็วกว่าแบบแรกเยอะ
ต่อมาเมื่อเราทำการเขียนโค้ดเสร็จแล้ว เราจะทำการเอาโค้ดที่เราเขียนนั้นมาใส่ในไฟล์ index.js โดยเมื่อเราใส่โค้ด เราจะเปิด Terminal ขึ้นมาแล้วพิมพ์คำสั่ง
npm run test -- *No. of step* --watch
โดยถ้าเราทำ step 2 จะได้
npm run test -- 2 --watch
ซึ่งถ้าเรารันคำสั่งนี้แล้วได้ผ่านหมดก็จะถือว่าโค้ดที่เราเขียนนั้นถูกต้อง
Note: your terminal should be in the the-typeinator directory, not the root repository's directory. เราต้องรันคำสั่งนี้ที่แฟ้มของ the-typeinator
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2025 Blockdit
