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 เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

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