บทความ IT เจ๋งๆ

Top 5 TypeScript Features ที่คุณควรใช้งานให้เชี่ยวชาญ

21-เม.ย.-21

คัมภีร์เทพ IT

ปัจจุบัน TypeScript เริ่มเป็น Tool ที่ถูกใช้งานบ่อย ๆ สำหรับ Web/Node Project ใหม่ ๆ ถึงแม้ TypeScript จะมีประโยชน์มาก แต่หากคุณใช้ Features ของ TypeScript ไม่ถูกต้องและไม่ทำตาม Best Practices อาจทำให้เกิด Code Duplication ได้ และบทความนี้ก็คือ Top 5 TypeScript Features ที่คุณควรใช้งานให้เชี่ยวชาญ

​1. Unions

Unions เป็นหนึ่งใน Features พื้นฐานและใช้งานง่ายที่สุดของ TypeScript มันช่วยให้เราสามารถรวมหลาย ๆ Types เข้าด้วยกันได้อย่างง่ายดาย Intersection และ Union Types เป็นหนึ่งในวิธีที่เราสามารถใช้ในการสร้าง Type ได้

มันมีประโยชน์มากเมื่อเราต้องการแสดงว่า Type นั้นเป็น Nullable:

Unions ไม่ได้ถูกจำกัดเฉพาะกลุ่มที่ไม่ได้ Undefined หรือ Primitives เพียงเท่านั้น แต่มันยังสามารถใช้สำหรับ Interface หรือ Type อื่น ๆ ได้อีกด้วย

เมื่อพิจารณาจาก Unions ข้างต้น เราจะแยกความแตกต่างระหว่าง Bike และ Plane ได้อย่างไร ด้วยการใช้ Discriminated Union Feature เราจะสร้าง enum ที่มีชื่อว่า Vehicles และใช้มันเป็น Property Value

มาดูกันว่า Code ของเราจะมีหน้าตาอย่างไร:

เราจะเห็นว่า Unions เป็น Tool ที่เรียบง่ายแต่ทรงพลัง แต่อาจต้องใช้เทคนิคเพิ่มเติมเล็ก ๆ น้อย ๆ อย่างไรก็ตามหากเราต้องการแสดง Types/Interfaces ให้มีประสิทธิภาพมากขึ้น เราอาจจำเป็นต้องใช้ Generics

2. Generics

มีวิธีการใดที่ดีที่สุดในการทำให้ Methods/APIs ของเราสามารถ Reusable ได้? นั่นคือการใช้ Generics! มันเป็น Feature ที่พบได้ใน Typed Languages ส่วนใหญ่ มันช่วยให้เราสามารถแสดง Type ในแบบทั่วไปได้มากขึ้น สิ่งนี้จะช่วยเพิ่มศักยภาพให้กับ Classes และ Types ของเราได้มากขึ้น

มาเริ่มกันด้วยตัวอย่างง่าย ๆ กัน ลองสร้าง Method ที่เพิ่ม Defined Types ต่าง ๆ ใน Array กัน:

จะเกิดอะไรขึ้นถ้าเราต้องการสร้าง Utility แบบเดียวกันในกรณีที่เป็น int Type? ด้วยการใช้ Generics เราสามารถใช้การ Reuse Code แทนการเพิ่ม Boilerplate เข้าไปได้:

แล้วเราสามารถจะป้องกันไม่ให้เกิด Type ที่เราไม่ต้องการใน T ได้อย่างไร? เราสามารถใช้ Extends เพื่อทำสิ่งนั้นได้:

Generics จะช่วยให้เราสามารถสร้าง Interfaces ที่ยืดหยุ่นและมีประสิทธิภาพสำหรับ Types ของเรา มันถือเป็น Feature สำคัญที่คุณควรใช้งานให้เป็นไว้

3. Tuples

Tuples คืออะไร? ลองมาดูคำจำกัดความของมันกัน:

"Tuple Types ช่วยให้คุณสามารถแสดง Array ที่มีจำนวน Elements ที่แน่นอนซึ่งเรารู้ Types ของมันอยู่แล้ว แต่ไม่จำเป็นต้องเหมือนกัน ตัวอย่างเช่น คุณอาจต้องการแทนค่า เป็นคู่ของ String และ Number" – Docs ของ TypeScript

สิ่งที่สำคัญที่สุดคือ Array เหล่านั้น มีความยาวของ Value ที่แน่นอน ซึ่งมี 2 วิธีในการ Define Tuples ขึ้นมาคือ:

Explicitly:

Implicitly:

ข้อแตกต่างเพียงอย่างเดียวคือ as const โดยจะทำให้ Array เป็นแบบ Read-Only

โปรดทราบว่า เราสามารถทำการ Label Tuples ได้เช่นกัน:

Label ไม่ได้กำหนดให้เราตั้งชื่อตัวแปรให้แตกต่างกันเมื่อต้องการ Destructuring แต่มันมีไว้สำหรับทำ Document และ Tooling เท่านั้น Label จะช่วยให้ Code อ่านง่ายและ Maintain ง่ายขึ้นเท่านั้น

โปรดรู้ไว้ว่า มีกฎที่สำคัญอย่างหนึ่งเมื่อใช้ Tuples ที่มี Label ก็คือ เมื่อทำการ Label Tuple Element แล้ว Element อื่น ๆ ทั้งหมดใน Tuple จะต้องถูก Label ด้วย

4. Mapped Types

Mapped Types คืออะไร? มันเป็นวิธีหลีกเลี่ยงการ Define Interfaces ซ้ำ ๆ คุณสามารถอ้างอิง Type บน Type หรือ Interface อื่น ๆ ได้ ซึ่งเป็นการช่วยลดการทำงานแบบ Manual ของคุณ 

"เมื่อคุณไม่ต้องการทำอะไรซ้ำ ๆ บางครั้ง Type ก็ต้องอ้างอิงตาม Type อื่น ๆ"

Mapped Types สร้างขึ้นบน  Syntax สำหรับ  Index Signatures ซึ่งถูกใช้ในการ Declare Types ของ Properties ที่ไม่ได้ถูก Declare ไว้ก่อนหน้านี้"– Document ของ TypeScript

สรุปแล้ว Mapped Types จะช่วยให้เราสามารถสร้าง Types ใหม่ได้ตาม Type ที่เรามีอยู่

TypeScript มาพร้อมกับหลาย Utility Types ดังนั้น เราจึงไม่จำเป็นต้อง Rewrite พวกมันในแต่ละ Project

ลองมาดูสิ่งที่พบกันบ่อย ๆ: Omit, Partial, Readonly, Readonly, Exclude, Extract, NonNullable และ ReturnType

สำหรับการใช้งานจริง สมมติว่าเราต้องการ Convert Properties ทั้งหมดของ Entity ที่ชื่อว่า Teacher ให้เป็นแบบ readonly ซึ่งในกรณีนี้เราสามารถใช้ Readonly Utility Type ได้ มาดูการใช้งานจริงกัน:

มาสรุปวิธีการใช้งาน Readonly กันอีกครั้ง:

คราวนี้ เรามาสร้าง Custom Utility กัน งั้นลองมาสับเปลี่ยน Readonly Type เพื่อสร้างให้เป็นแบบ Writable กัน:

หมายเหตุ: ลองสังเกตที่ตัว - Modifier ในสถานการณ์นี้มันถูกใช้เพื่อ Remove Readonly Modifier

5. Type Guards

Type Guards เป็น Set ของ Tools ที่ช่วยจำกัด Type ของ Objects ให้แคบลง ซึ่งหมายความว่า เราสามารถเปลี่ยนจาก General Type ไปเป็น Type ที่ Specific มากขึ้น

มีหลายเทคนิคในการทำ Type Guards สำหรับบทความนี้ เราจะเน้นเฉพาะ User-Defined Type Guards สิ่งเหล่านี้เป็นการ Assertion โดยทั่วไป อย่างเช่น Functions สำหรับ Type ใด ๆ

แล้วเราจะใช้งานมันได้อย่างไร? เราเพียงแค่ต้อง Define Function ที่ Return Type ของมันเป็น Type Predicate และมัน Return ค่า True/False ลองมาดูกันว่าเราจะเปลี่ยน typeof Operator ให้เป็น Type Guard Function ได้อย่างไร:

โปรดทราบว่า หาก isNumber เป็น False, TypeScript สามารถทึกทักเอาได้ว่า ค่านั้นเป็น String ทั้งที่ x อาจเป็นได้ทั้ง String หรือ Number

ลองมาดูอีกตัวอย่างของ Type Guard โดยใช้ Custom Interface:

โปรดทราบว่า Return Type ของ isHunter Function ก็คือ x is Hunter ซึ่ง Assertion Function นั้นจะถือเป็น Type Guard ของเรา

Type Guards ถูกจำกัดขอบเขต ภายใน Code Block ของ isHunter(x) นั้น ตัวแปร x เป็น Type ของ Hunter นั่นหมายความว่า เราสามารถ Call hunt Method ของมันได้ แต่สำหรับนอก Code Block นี้แล้ว x Type จะยังคงเป็น unknown

ที่มา:  https://betterprogramming.pub/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

 

ประเภทบทความ