8 Expert TypeScript Tricks That Will Take Your Code to the Next Level
27-Sep-23
คัมภีร์เทพ IT
See the original english version Click here!
ถ้าจะเปรียบเทียบง่าย ๆ TypeScript ก็คือ JavaScript ใน Version ที่ได้รับการพัฒนาหรือ Upgrade ให้มีความสามารถและเขียน Program ให้มีประสิทธิภาพมากขึ้น และในบทความนี้จะมาแนะนำ 8 เคล็ดลับ TypeScript ที่ช่วยให้ Code ของคุณมีประสิทธิภาพกว่าเดิม
ทำไมต้องใช้ TypeScript
TypeScript จะช่วยให้คุณสามารถเขียน Code ที่มีประสิทธิภาพได้สะดวกขึ้นด้วยการตรวจจับ Bugs ตั้งแต่เนิ่น ๆ และปรับปรุง Autocompletion Feature ซึ่งในท้ายที่สุด มันจะนำไปสู่คุณภาพของ Code ที่ดียิ่งขึ้นกว่าเดิม
เรามาดูเคล็ดลับที่มีประโยชน์เหล่านั้นกันเลย
1. Advanced Types
เคล็ดลับนี้จะเกี่ยวข้องกับ Advanced Types เช่น Union Types, Intersection Types และ Type Aliases สิ่งนี้จะทำให้คุณเขียน TypeScript Code ได้อย่างยืดหยุ่นมากยิ่งขึ้น
ตัวอย่าง Code สำหรับ Advanced Types
Conditional Types Advanced Type Inference
Conditional Types ของ TypeScript จะช่วยให้คุณสร้าง Type Inference Patterns ที่ซับซ้อนตาม Conditions ได้ ตัวอย่างเช่น คุณสามารถสร้าง Type ที่แยก Property Names ของ Object ที่กำหนดได้:
2. Type Guards
ใน TypeScript คุณสามารถสร้าง Type Guard Function ที่คุณสามารถกำหนดเองได้ ซึ่งจะช่วยให้คุณมั่นใจใน Type Safety ระหว่าง Runtime
ตัวอย่าง Code สำหรับ Type Guards
Type Guards สำหรับ Discriminated Unions
Type Guard จะช่วยให้คุณจำกัด Type ของ Variable ให้แคบลงใน Discriminated Union คุณสามารถใช้ประโยชน์จาก Type Predicates เพื่อให้บรรลุสิ่งนี้:
3. Type Inference
TypeScript Feature ที่ยอดเยี่ยมอีกตัวหนึ่งก็คือ Type Inference ซึ่ง TypeScript จะอนุมาน Type ตาม Value โดยอัตโนมัติ
ตัวอย่าง Code สำหรับ Type Inference
4. Utility Types
Utility Types มีวิธีในการแปลง Type หนึ่งไปเป็นอีก Type หนึ่ง ซึ่งตัวอย่างบางส่วน เช่น Partial, Readonly, Record และ Pick
ตัวอย่าง Code สำหรับ Utility Types
5. Mapped Types
Mapped Types เป็นวิธีหนึ่งในการสร้าง Type ใหม่โดยยึดตาม Type เดิม โดยใช้การ Transformation
ตัวอย่าง Code สำหรับ Mapped Types
6. Decorators
Decorators ได้จัดเตรียมวิธีการเพิ่ม Annotations และ Meta-Programming Syntax สำหรับ Class Declarations และ Members
ตัวอย่าง Code สำหรับ Decorators
7. การใช้ Unknown แทนการใช้ Any
Unknown Type ก็เหมือน ๆ กับ Any Type แต่มีความปลอดภัยมากกว่า มันจะบังคับให้เราทำการตรวจสอบ Type ก่อนดำเนินการใด ๆ กับ Values
ตัวอย่าง Code สำหรับการใช้ Unknown แทนการใช้ Any
8. จัดการ Error ด้วย Unknown Type
Unknown Type ของ TypeScript ถือเป็นทางเลือกที่ปลอดภัยกว่าเมื่อต้องรับมือกับ Unknown หรือ Dynamically Typed Values คุณสามารถใช้ Type Assertions หรือ Type Guards เพื่อให้สามารถจัดการได้อย่างปลอดภัยขึ้น:
สรุป
เมื่อคุณได้เรียนรู้ 8 เคล็ดลับ TypeScript ที่ช่วยให้ Code ของคุณมีประสิทธิภาพกว่าเดิมแล้ว ก็ถึงเวลาที่จะลองนำไปประยุกต์ใช้กับงานที่ทำ หวังว่าเคล็ดลับเหล่านี้จะช่วยยกระดับ TypeScript Code ของคุณขึ้นไปอีกขั้น
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
บทความล่าสุด