คัมภีร์เทพ IT 10 TypeScript Features ที่คุณอาจยังไม่เคยใช้ หรือไม่เข้าใจ

10 TypeScript Features ที่คุณอาจยังไม่เคยใช้ หรือไม่เข้าใจ

05-เม.ย.-22

คัมภีร์เทพ IT

10 TypeScript Features ที่คุณอาจยังไม่เคยใช้ หรือไม่เข้าใจ

TypeScript มี Features มากมายที่เราใช้งานอยู่เป็นประจำ หรือกล่าวอีกนัยหนึ่งคือ มี Features จำนวนมากที่จะต้องคำนึงถึง และมี Features ใหม่ ๆ เข้ามาอย่างต่อเนื่อง เป็นเรื่องง่ายมากที่จะสับสนกับ Documentation หรือบาง Features และในบทความนี้จะกล่าวถึง 10 TypeScript Features ที่คุณอาจยังไม่เคยใช้ หรือไม่เข้าใจ

1. จะใช้ “unknown” Type อย่างไรและเมื่อใด (หรือ “unknown” vs “any”)

หากเทียบกันแล้วดูเหมือน “unknown” ดูจะใช้งานแล้วปลอดภัยกว่าใช้ “any”

มันจะมีประโยชน์อย่างมาก เมื่อย้ายจาก JavaScript ไปยัง TypeScript Project และในช่วงระหว่างการส่งผ่าน อาจช่วยให้คุณเข้าใจ Code ได้ดีขึ้นและปลอดภัยยิ่งขึ้น

ก่อนที่เราจะทำความเข้าใจความแตกต่างระหว่าง unknown กับ any Type เราลองมาดูความคล้ายคลึงกันก่อน

เราสามารถ Assign สิ่งที่เราต้องการให้กับตัวแปรด้วย any และ unknown Type โดยมันจะช่วยให้ทุกอย่างทำงานได้โดยไม่มี Errors

แต่นี่คือจุดที่มีความคล้ายคลึงกันเท่านั้น

unknown แตกต่างจาก any ตรงที่ unknown Type จะช่วยป้องกันไม่ให้เราทำสิ่งต่าง ๆ ที่เราต้องการด้วย Value Type ที่เราไม่รู้จัก

ลองพิจารณาตัวอย่างต่อไปนี้:

หรือแม้แต่สิ่งนี้:

ในกรณีนี้ เราจะไม่ได้รับ Build Time Error ใด ๆ แต่เรากลับจะได้รับ Runtime Error แทน ซึ่งมันทำให้แย่กว่าเดิมซะอีก

พูดง่ายๆ ก็คือ เมื่อเราใช้ Type any มันเหมือนกับเรากำลังพูดกับ Compiler ว่า "ไม่ต้องมาตรวจสอบ Code นี้นะ ฉันรู้ว่า ฉันกำลังทำอะไรอยู่”

ในทางกลับกัน TypeScript Compiler จะไม่มีการใช้สมมติฐานใด ๆ เกี่ยวกับ Type เลย ดังนั้น เราจึงไม่สามารถป้องกัน Runtime Errors ได้ และส่วนใหญ่แล้วก็ไม่ใช่สิ่งที่เราต้องการเลย

ด้วย unknown Type จะทำให้เราจะได้รับ Build Time Error อีกทั้ง IDE ก็จะแสดง Error ให้เรารู้ในทันที

เราลองมาดูด้านล่างนี้กัน:

ทุกครั้งที่เราพยายามทำอะไรกับสิ่งนี้ เราจะได้รับ Error กลับมา

ในการทำงานกับ unknown เราต้องจำกัด Type ให้แคบลง

การใช้ Type Assertion:

การใช้ Type Guard:

การใช้ Self-Defined Type Guard:

การใช้ Assertion Function:

2. Indexed Access Type (Lookup Type)

เราสามารถใช้ Indexed Access Type เพื่อค้นหา Property ที่ต้องการใน Type อื่น ๆ เราลองมาดูตัวอย่างกัน:

ในที่นี่ เราจะสร้าง Type ใหม่ เช่น id, Session, Street, Addons จาก Object ที่มีอยู่

หรือเราสามารถใช้มันโดยตรงใน Function ดังต่อไปนี้:

3. “infer” Keyword

infer Keyword จะทำให้คุณสามารถคาดการณ์ Type จาก Type อื่นภายใน Conditional Type ได้

และนี่ก็คือตัวอย่าง:

ที่นี่เราก็สามารถคาดการณ์ Type ของ addon เป็น Type ใหม่ที่แยกจากกัน คุณว่ามันเจ๋งไหมล่ะ?

4. Assert Functions

มีชุด เฉพาะของ Functions ที่ทำการ Throw Errors ออกมา หากมีสิ่งไม่คาดคิดเกิดขึ้น เราเรียกว่า “Assertion” Functions

ในตัวอย่างข้างต้น เราจะตรวจสอบว่า ค่านั้นเป็น String หรือไม่ ซึ่งในกรณีนี้ เราไม่ต้องทำอะไรเลย เพราะมันจะ Throw Error ออกมาให้เรารู้เอง

นี่คือตัวอย่างที่ซับซ้อนมากขึ้น ซึ่งแสดงวิธี Assert Objects และ Inner Objects:

นี่คือตัวอย่างการนำไปใช้:

5. เมื่อใดที่ควรใช้ “never”

never Type จะแสดงถึงค่าที่ไม่เคยถูก Observe

ใน Return Type นี่กำลังหมายความว่า Function จะ Throw Exception หรือ Terminates Execution ของ Program

นี่เป็นอีกตัวอย่างหนึ่งตัวอย่างที่ใช้ Promises:

และนี่ก็เป็นอีกตัวอย่าง ที่ Program จะทำงานไม่สิ้นสุด:

never จะปรากฏเช่นกัน เมื่อ TypeScript กำหนดว่าไม่มีอะไรเหลืออยู่ในจำนวนทั้งหมด

6. การใช้ “const” Assertion

เมื่อสร้าง Literal Expressions ด้วย const Assertions เราสามารถส่งสัญญาณไปยัง Language ว่า:

ไม่ควรขยาย Literal Type ใน Expression นั้น (เช่น ไม่ต้องเปลี่ยนจาก "hello" เป็น string)
Object Literals ควรมี readonly Properties
Array Literals กลายเป็น readonly Tuples

และนี่คือการใช้ const Assertion:

นอกจากนี้ ด้วยความช่วยเหลือของ const Assertion เราสามารถเปลี่ยน Array ของ Strings เป็น String Literal Union Type ได้:

เราใช้ [number] หลัง roles Array เพื่อบอกให้ TypeScript ดึงค่า Index ที่เป็นตัวเลขทั้งหมดจาก roles Array

7. “override” Keyword

ตั้งแต่ Version 4.3 เป็นต้นมา ตอนนี้ เราสามารถบอกใน Child Classes ได้ว่า เรากำลัง Override Behavior ที่มีอยู่โดยใช้ override Keyword

เนื่องจากเป็น Feature ใหม่ล่าสุด คุณอาจใช้ Override ในรูปแบบเก่า แต่ขอแนะนำให้เปลี่ยนการ Config ค่าเพื่อให้ใช้กฎนี้ คุณเพียงแค่ต้องเปลี่ยน noImplicitOverride ให้เป็น True