แนวปฏิบัติที่ดีที่สุดสำหรับตรรกะเงื่อนไขใน TypeScript

บทความนี้อธิบายแนวปฏิบัติที่ดีที่สุดสำหรับการใช้ตรรกะเงื่อนไขใน TypeScript

YouTube Video

แนวปฏิบัติที่ดีที่สุดสำหรับตรรกะเงื่อนไขใน TypeScript

การควบคุมประเภทด้วย Type Guards

โดยการใช้ระบบประเภทของ TypeScript และ Type Guards ภายในคำสั่ง if คุณสามารถเพิ่มความปลอดภัยของประเภทและความสามารถในการอ่านโค้ด

1function processInput(input: string | number) {
2    if (typeof input === "string") {
3        console.log(`String input: ${input.toUpperCase()}`);
4    } else {
5        console.log(`Number input: ${input.toFixed(2)}`);
6    }
7}

การใช้ typeof และ Type Guards อื่นๆ ช่วยให้มั่นใจว่าโค้ดภายในแต่ละบล็อกจะปลอดภัยต่อประเภทและสอดคล้องกับบริบท

หลีกเลี่ยงการซ้อนคำสั่ง if

คำสั่ง if ที่ซ้อนลึกเกินไปจะลดความสามารถในการอ่านโค้ดและการรักษาดูแล ให้ใช้การคืนค่าก่อนหน้า (early returns), การใช้ตัวดำเนินการแบบตรรกะ หรือแยกเป็นฟังก์ชันแทน

ตัวอย่างที่ไม่ดี:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (user.age) {
3        if (user.age > 18) {
4            if (user.isAdmin) {
5                console.log("User is an adult admin.");
6            }
7        }
8    }
9}

ตัวอย่างที่ปรับปรุงแล้ว:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (!user.age || user.age <= 18 || !user.isAdmin) {
3        return;
4    }
5    console.log("User is an adult admin.");
6}

วิธีการนี้ทำให้โค้ดเรียบง่ายและทำให้ตรรกะเข้าใจได้ง่ายขึ้น

การใช้งาน Optional Chaining

เมื่อคุณตรวจสอบคุณสมบัติที่ซ้อนกัน ให้ใช้ optional chaining (?.) เพื่อหลีกเลี่ยงเงื่อนไข if ที่ไม่จำเป็น

กรณีที่ไม่มี Optional Chaining:

1if (user && user.profile && user.profile.email) {
2    console.log(user.profile.email);
3}

การใช้ Optional Chaining:

1if (user?.profile?.email) {
2    console.log(user.profile.email);
3}

สิ่งนี้ช่วยลดโค้ดที่ซ้ำซ้อนและปรับปรุงความสามารถในการอ่าน ที่นี่ โค้ดที่ซ้ำซ้อนหมายถึงโค้ดมาตรฐานที่ต้องใช้ซ้ำบ่อยๆ เพื่อทำภารกิจเฉพาะในโปรแกรมมิ่ง

ใช้ตัวดำเนินการตรวจสอบความเท่าเทียมแบบเข้มงวด

TypeScript รองรับการจัดประเภทอย่างเข้มงวด และการใช้ตัวดำเนินการตรวจสอบความเท่าเทียมแบบเข้มงวด (===) หรือไม่เท่าเทียม (!==) ช่วยป้องกันการแปลงประเภทที่ไม่คาดคิด

ตัวอย่างที่ไม่ดี:

1if (value == "123") {
2    console.log("Value is 123.");
3}

ตัวอย่างที่ปรับปรุงแล้ว:

1if (value === "123") {
2    console.log("Value is 123.");
3}

ใช้ Enums หรือประเภท Literal สำหรับเงื่อนไขที่ชัดเจน

การใช้ Enums หรือประเภท Literal ทำให้เงื่อนไขชัดเจนขึ้นและลดโอกาสของข้อผิดพลาด

 1type Status = "success" | "error" | "loading";
 2
 3function displayMessage(status: Status) {
 4    if (status === "success") {
 5        console.log("Operation succeeded.");
 6    } else if (status === "error") {
 7        console.log("Operation failed.");
 8    } else {
 9        console.log("Loading...");
10    }
11}

ด้วยการกำหนดค่าที่คาดไว้ TypeScript สามารถตรวจจับประเภทและรับประกันความถูกต้อง

รวมเงื่อนไขที่คล้ายกัน

เมื่อมีหลายเงื่อนไขที่ใช้ตรรกะเดียวกัน ควรรวมไว้ด้วยกันโดยใช้ตัวดำเนินการตรรกะหรือตัวเลือก switch

ตัวอย่างที่ไม่ดี:

1if (role === "admin") {
2    grantAccess();
3}
4if (role === "superadmin") {
5    grantAccess();
6}

ตัวอย่างที่ปรับปรุงแล้ว:

1if (role === "admin" || role === "superadmin") {
2    grantAccess();
3}

อีกทางเลือกหนึ่งคือใช้ตัวเลือก switch เพื่อจัดการหลายกรณีที่ชัดเจน:

 1switch (role) {
 2    case "admin":
 3    case "superadmin":
 4        grantAccess();
 5        break;
 6    case "user":
 7        console.log("Limited access.");
 8        break;
 9    default:
10        console.log("No access.");
11}

หลีกเลี่ยงการทำให้เงื่อนไขซับซ้อน

การใช้เงื่อนไขที่ซับซ้อนในคำสั่ง if จะลดความเข้าใจได้ง่ายของโค้ด แยกออกมาเป็นตัวแปรหรือฟังก์ชันที่มีความหมาย

ตัวอย่างที่ไม่ดี:

1if (user.age > 18 && user.isAdmin && user.permissions.includes("write")) {
2    console.log("User can write.");
3}

ตัวอย่างที่ปรับปรุงแล้ว:

1const isAdultAdminWithWriteAccess = user.age > 18 && user.isAdmin && user.permissions.includes("write");
2if (isAdultAdminWithWriteAccess) {
3    console.log("User can write.");
4}

การตั้งชื่อเงื่อนไขช่วยปรับปรุงความชัดเจนและทำให้โค้ดสามารถบรรยายตัวเองได้

ใช้ตัวดำเนินการ ternary สำหรับเงื่อนไขงง่าย

สำหรับเงื่อนไขง่าย ๆ การใช้ตัวดำเนินการ ternary ช่วยให้โค้ดกระชับ

ตัวอย่าง:

1const message = isLoggedIn ? "Welcome back!" : "Please log in.";
2console.log(message);

อย่างไรก็ตาม ควรหลีกเลี่ยงการใช้ตัวดำเนินการ ternary กับเงื่อนไขที่ซับซ้อนเพราะจะลดความเข้าใจได้ง่าย

สรุป

ด้วยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้ คุณสามารถทำให้คำสั่ง if ใน TypeScript ชัดเจน มีประสิทธิภาพ และดูแลรักษาได้ง่าย ใช้คุณสมบัติของ TypeScript เช่น type guards, optional chaining และ enums เพื่อปรับปรุงความเข้าใจได้ง่ายและความแข็งแกร่งของโค้ด ทำให้เงื่อนไขกระชับและชัดเจน มุ่งเน้นให้โค้ดเข้าใจและดูแลรักษาได้ง่ายเสมอ

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video