บทความ IT เจ๋งๆ
6 TypeScript Features ที่ช่วยคุณในการเขียน Clean Code
26-พ.ย.-21
คัมภีร์เทพ IT
สำหรับ Developer แล้ว หนึ่งในสิ่งที่พวกเขาให้ความสำคัญคือ การเขียน Code ให้ Clean มากเท่าที่จะสามารถทำได้ สำหรับคนที่ใช้ TypeScript นี่เป็น 6 TypeScript Features ที่ช่วยคุณในการเขียน Clean Code
1. Constructor Shorthand with Parameter Properties
มีวิธีเขียน Classes ที่สั้นลง โดยใช้ Parameter Properties ของ TypeScript โดย Shorthand นี้จะช่วยให้คุณประกาศ Class Properties ที่มีชื่อเดียวกับ Class Constructor Parameters สิ่งที่คุณต้องทำก็คือ เติมคำนำหน้า Parameters ของคุณด้วย Visibility Modifiers
ลองมาดู Class นี้กัน:
จะเห็นว่าเรา Assign Parameters ที่ Constructor รับให้กับ Class Properties โดยใช้ชื่อเดียวกัน
นี่คือวิธีที่เราสามารถปรับแต่ง Code นี้ให้สั้นลง โดยใช้ Parameter Properties:
Nullish Coalescence เป็น ECMAScript Feature ที่ TypeScript เริ่มมีการรองรับ Nullish Coalescing Operator จะช่วยให้คุณระบุค่าทางเลือกสำหรับค่า Null หรือ Undefined และนี่ก็คือสิ่งที่พูดถึงอยู่:
คุณอาจสงสัยว่า: “มันแตกต่างจาก Logic OR (||) Operator อย่างไร" คำตอบก็คือ Nullish Coalescing Operator เกี่ยวข้องกับค่า Null หรือ Undefined โดยเฉพาะ ในขณะที่ OR Operator จะ Return ตัว Right-hand Operand เหนือค่า False ใด ๆ รวมทั้งค่า Null , Undefined, Empty Strings และ Zeros
Feature นี้ยังคงมาจาก ECMAScript โดยที่ Private Class Field เป็น Stage 3 ECMAScript Proposal ซึ่งมีการยอมรับใน TypeScript Community มากยิ่งขึ้น สำหรับการประกาศ Private Class Field คุณสามารถใช้ # Syntax:
ความแตกต่างระหว่างการใช้ Private Class Field กับ Private Keyword ก็คือ Private Class Field มี Run-Time Guarantees ที่ดีกว่า สำหรับ TypeScript Fields ที่ประกาศด้วย Private Keyword จะกลายเป็น Field ปกติใน JavaScript Code ที่ Compile แล้ว ในทางกลับกัน Private Class Field จะยังคงเป็น Private ใน Code ที่ Compile แล้ว
การพยายามเข้าถึง Private Class Field ในระหว่าง Run Time จะส่งผลให้เกิด Syntax Error นอกจากนี้มันยังหมายความว่า ผู้คนไม่สามารถตรวจสอบและสอดแนม Private Class Field ของคุณโดยใช้ Browser Dev Tools ได้
และด้วย Private Class Field ในที่สุดเราก็จะได้รับ Privacy อย่างแท้จริงใน JavaScript
4. Labeled Tuple Types
สำหรับ Feature นี้ มีให้ใช้สำหรับ TypeScript ตั้งแต่ Version 4.0 ขึ้นไป Labeled Tuple Types จะช่วยปรับปรุงประสบการณ์การทำงานกับ Tuples ของเรา
อันดับแรก เรามาพูดถึง Tuples ใน TypeScript คร่าว ๆ กันก่อนดีกว่า โดย Tuples ก็เป็น Array Types ที่มีขนาดคงที่ Tuples ต้องมีการประกาศ Types แม้ว่า Types จะไม่จำเป็นต้องเหมือนกันทั้งหมด นี่คือตัวอย่างการประกาศ Tuple Type:
ด้วย Labeled Tuple Types เราจะสามารถ Label Types ของ Tuples ของเราได้ นี่คือสิ่งที่เราพูดถึง:
แล้วเหตุใด เราจึงต้องใช้ Labeled Tuple Types? อย่างแรก คุณจะได้รับประสบการณ์ที่ดีกว่าเดิมเกี่ยวกับ Auto-Complete เมื่อต้องทำงานกับ Functions และ Spread Operators:
Autocomplete จะมีลักษณะดังนี้กับ Tuple ปกติ:
ด้วย Labeled Tuple Types คุณจะสามารถเห็นธรรมชาติของ Data ที่ Function ของคุณยอมรับโดยที่ไม่ต้องเจาะลึกลงไปในส่วนของการ Declare
5. Template Type Literals
Template Type Literals เป็น TypeScript Feature ที่มีให้ใช้งานตั้งแต่ Version 4.1 ขึ้นไป Template Type Literals ช่วยให้คุณสร้าง String Types ใหม่ จากการผสมผสานกันของ Union Types ต่าง ๆ
ลองนึกภาพว่า คุณต้องการเตรียมชุดของ Options ที่สร้างขึ้นจากการรวม Union Types เข้าด้วยกันให้กับ Users ของคุณ คุณสามารถใช้ Template Type Literals แทนจะพิมพ์แต่ละ Option ด้วยตัวคุณเอง:
โปรดสังเกตว่า Position Type ใหม่มีการผสมผสาน topBottom และ leftRight Types ทั้งหมดเข้าด้วยกัน ได้อย่างไร
Template Type Literals มีอยู่ใน Applications มากมาย แต่มักจะพบใน UI Libraries และ Design Systems
6. Utility Types
TypeScript มีชุดของ Utility Types ที่ช่วยให้คุณสร้าง Types ใหม่ ๆ ที่นอกเหนือจาก Types ที่มีอยู่ มีหลาย Utility Types ที่ครอบคลุมสถานการณ์ต่าง ๆ เช่น การเลือก Type Properties ที่จะ Copy, ทำให้เป็น Uppercase หรือการสร้าง Properties Optional
นี่เป็นตัวอย่างการใช้ Omit Utility ที่คัดลอก Props ทั้งหมดจาก Original Type ยกเว้นสิ่งที่คุณเลือกที่จะไม่ให้รวมอยู่ในนั้น:
ที่มา: https://isamatov.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด