Thực hành tốt nhất cho logic điều kiện trong TypeScript

Bài viết này giải thích các thực hành tốt nhất cho logic điều kiện trong TypeScript.

YouTube Video

Thực hành tốt nhất cho logic điều kiện trong TypeScript

Thu hẹp kiểu dữ liệu với Type Guards

Bằng cách tận dụng hệ thống kiểu của TypeScript và sử dụng type guards trong các câu lệnh if, bạn có thể cải thiện tính an toàn và khả năng đọc của mã.

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}

Sử dụng typeof và các type guards khác đảm bảo rằng mã trong mỗi khối an toàn về kiểu dữ liệu và phù hợp với ngữ cảnh.

Tránh các câu lệnh if lồng nhau

Các câu lệnh if lồng nhau sâu làm giảm khả năng đọc và bảo trì mã. Thay vào đó, sử dụng các lệnh trả về sớm, toán tử logic hoặc tách hàm.

Ví dụ không tốt:

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}

Ví dụ cải thiện:

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}

Cách tiếp cận này làm phẳng mã và giúp logic dễ hiểu hơn.

Sử dụng Optional Chaining

Khi kiểm tra các thuộc tính lồng nhau, sử dụng optional chaining (?.) để tránh các điều kiện if không cần thiết.

Không sử dụng Optional Chaining:

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

Sử dụng Optional Chaining:

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

Điều này giảm mã lặp và cải thiện khả năng đọc. Ở đây, mã boilerplate là mã lặp lại, tiêu chuẩn hóa thường được yêu cầu để hoàn thành các tác vụ cụ thể trong lập trình.

Sử dụng Toán tử So sánh Chặt chẽ

TypeScript hỗ trợ kiểu dữ liệu chặt chẽ, và sử dụng toán tử so sánh chặt chẽ (===) hoặc không bằng chặt chẽ (!==) giúp ngăn ngừa sự ép kiểu không mong muốn.

Ví dụ không tốt:

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

Ví dụ cải thiện:

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

Sử dụng Enums hoặc Literal Types cho các điều kiện rõ ràng

Sử dụng enums hoặc literal types làm rõ các điều kiện và giảm nguy cơ lỗi.

 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}

Bằng cách định nghĩa các giá trị mong đợi, TypeScript có thể phát hiện kiểu dữ liệu và đảm bảo độ chính xác.

Kết hợp các điều kiện tương tự

Khi nhiều điều kiện chia sẻ cùng một logic, hãy hợp nhất chúng bằng cách sử dụng các toán tử logic hoặc câu lệnh switch.

Ví dụ không tốt:

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

Ví dụ cải thiện:

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

Hoặc, sử dụng câu lệnh switch để xử lý nhiều nhánh rõ ràng:

 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}

Tránh làm cho các biểu thức điều kiện trở nên phức tạp

Các biểu thức điều kiện phức tạp trong câu lệnh if làm giảm khả năng đọc. Tách chúng thành các biến hoặc hàm có ý nghĩa.

Ví dụ không tốt:

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

Ví dụ cải thiện:

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

Đặt tên cho các điều kiện giúp cải thiện sự rõ ràng và làm cho mã có thể tự giải thích.

Sử dụng toán tử ba ngôi cho các điều kiện đơn giản

Đối với các điều kiện đơn giản, việc sử dụng toán tử ba ngôi làm cho mã gọn gàng hơn.

Ví dụ:

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

Tuy nhiên, tránh sử dụng toán tử ba ngôi cho các điều kiện phức tạp vì nó làm giảm khả năng đọc.

Thay thế các nhánh điều kiện bằng các mảng hoặc bản đồ

Khi điều kiện chỉ đơn giản là ánh xạ giá trị, việc sử dụng các mảng hoặc bản đồ có thể cải thiện khả năng dễ đọc và dễ bảo trì mã so với các câu lệnh switch hoặc các khối if-else phức tạp. Trong TypeScript, bạn có thể tận dụng thông tin kiểu để triển khai nó an toàn hơn.

Ví dụ không tốt:

 1function getDayName(day: number): string {
 2    switch (day) {
 3        case 0:
 4            return "Sunday";
 5        case 1:
 6            return "Monday";
 7        case 2:
 8            return "Tuesday";
 9        case 3:
10            return "Wednesday";
11        case 4:
12            return "Thursday";
13        case 5:
14            return "Friday";
15        case 6:
16            return "Saturday";
17        default:
18            return "Invalid day";
19    }
20}

Ví dụ cải thiện: Sử dụng một mảng

 1function getDayName(day: number): string {
 2    const days = [
 3        "Sunday",
 4        "Monday",
 5        "Tuesday",
 6        "Wednesday",
 7        "Thursday",
 8        "Friday",
 9        "Saturday"
10    ];
11    return days[day] ?? "Invalid day";
12}

Ví dụ cải thiện: Sử dụng một bản đồ

 1function getDayName(day: number): string {
 2    const dayMap = new Map<number, string>([
 3        [0, "Sunday"],
 4        [1, "Monday"],
 5        [2, "Tuesday"],
 6        [3, "Wednesday"],
 7        [4, "Thursday"],
 8        [5, "Friday"],
 9        [6, "Saturday"]
10    ]);
11    return dayMap.get(day) ?? "Invalid day";
12}

Kết luận

Bằng cách tuân theo các thực hành tốt nhất này, bạn có thể làm cho các câu lệnh if trong TypeScript trở nên rõ ràng, hiệu quả và dễ bảo trì. Bằng cách sử dụng các tính năng của TypeScript, chẳng hạn như bảo vệ kiểu (type guards), optional chaining và enums, bạn có thể cải thiện tính dễ đọc và độ bền vững của mã. Bằng cách tuân thủ các phương pháp tốt nhất, bạn có thể giữ các điều kiện ngắn gọn và rõ ràng, giúp mã dễ hiểu và dễ bảo trì hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video