Cách dùng Enum trong TypeScript

Enum, viết tắt của "enumeration" hay "enumerated type," là một tính năng mạnh mẽ trong TypeScript, giúp bạn định nghĩa một tập hợp các giá trị hằng số với tên gọi thay vì chỉ sử dụng các số hoặc chuỗi ký tự. Enums là một công cụ quan trọng trong việc tạo mã TypeScript có tính rõ ràng và dễ bảo trì. Trong bài viết này, mình sẽ tìm hiểu cách sử dụng Enum trong TypeScript và tìm hiểu về cú pháp, cách gán giá trị, ứng dụng thực tế, cũng như những lợi ích và hạn chế của chúng.

Enum TypeScript là gì?

Enum trong TypeScript (viết tắt của "enumeration") là một cấu trúc dữ liệu cho phép bạn định nghĩa một tập hợp các giá trị hằng số với tên gọi. Thay vì sử dụng các giá trị số hoặc chuỗi cứng nhắc, Enum cho phép bạn đặt tên cho các giá trị này, làm cho mã nguồn dễ đọc và rõ ràng hơn.

Enum trong TypeScript thường được sử dụng để biểu diễn các tùy chọn cố định, ví dụ như các ngày trong tuần, các trạng thái, màu sắc, hoặc các giá trị hằng số khác. Enum giúp giảm nguy cơ sai sót trong mã và làm cho mã nguồn dễ bảo trì hơn.

Dưới đây là một ví dụ đơn giản về cách định nghĩa và sử dụng Enum trong TypeScript:

Bài viết này được đăng tại [free tuts .net]

enum MauSac {
    Do = "red",
    Xanh = "green",
    XanhDương = "blue",
}

const mauXe: MauSac = MauSac.Do;
console.log(mauXe); // In ra: "red"

Trong ví dụ này, mình đã định nghĩa một Enum MauSac để biểu diễn các màu sắc và sử dụng nó để gán giá trị cho biến mauXe.

Định nghĩa và khai báo Enum

Cú pháp của Enum trong TypeScript

Trong TypeScript, bạn có thể định nghĩa một Enum bằng cách sử dụng cú pháp sau:

enum TênEnum {
    ThànhViên1,
    ThànhViên2,
    // ...
}

• TênEnum là tên của Enum, bạn có thể đặt bất kỳ tên nào.
• ThànhViên1, ThànhViên2, và các thành viên khác là các giá trị hằng số trong Enum. Mặc định, chúng có giá trị số từ 0, 1, 2, ... và tiếp tục.

Các thành viên và giá trị Enum

• Mỗi thành viên của Enum đại diện cho một giá trị hằng số. Mặc định, giá trị đầu tiên có giá trị 0 và giá trị tiếp theo tăng dần 1 mỗi lần.
• Bạn cũng có thể gán giá trị cho từng thành viên một cách tường minh:

enum NgayTrongTuan {
    ThuHai = 1,
    ThuBa = 2,
    ThuTu = 3,
    ThuNam = 4,
    ThuSau = 5,
    ThuBay = 6,
    ChuNhat = 7,
}

Trong ví dụ trên, mình đã gán giá trị số cho các ngày trong tuần, bắt đầu từ 1 cho Thứ Hai và kết thúc ở 7 cho Chủ Nhật.

Enum số học và Enum chuỗi ký tự

Mặc định, Enum trong TypeScript sử dụng số học làm giá trị. Tuy nhiên, bạn cũng có thể sử dụng chuỗi ký tự làm giá trị cho Enum bằng cách định nghĩa như sau:

enum MauSac {
    Do = "red",
    Xanh = "green",
    XanhDương = "blue",
}

Trong ví dụ này, mình đã định nghĩa một Enum với các giá trị là chuỗi ký tự thay vì số.

Với cú pháp và cấu trúc này, Enum trở thành một công cụ mạnh mẽ trong TypeScript cho việc xác định các giá trị hằng số và cải thiện tính rõ ràng và đọc mã nguồn.

Sử dụng Enum trong TypeScript

Gán và truy cập giá trị Enum

Để gán và truy cập giá trị của một Enum trong TypeScript, bạn có thể sử dụng cú pháp sau:

enum NgayTrongTuan {
    ThuHai = 1,
    ThuBa = 2,
    ThuTu = 3,
    ThuNam = 4,
    ThuSau = 5,
    ThuBay = 6,
    ChuNhat = 7,
}

const ngayHienTai: NgayTrongTuan = NgayTrongTuan.ThuHai;
console.log(ngayHienTai); // In ra: 1

Trong ví dụ trên, mình đã gán giá trị NgayTrongTuan.ThuHai (có giá trị là 1) cho biến ngayHienTai. Bạn có thể sử dụng biến này để truy cập giá trị Enum.

Duyệt qua các giá trị Enum

Để duyệt qua các giá trị của một Enum, bạn có thể sử dụng vòng lặp for...in. Dưới đây là ví dụ:

enum MauSac {
    Do = "red",
    Xanh = "green",
    XanhDương = "blue",
}

for (const mau in MauSac) {
    console.log(mau); // In ra: "Do", "Xanh", "XanhDương"
}

Lưu ý rằng việc duyệt qua Enum sẽ bao gồm cả các thành viên không có giá trị gán (thành viên mặc định).

Sử dụng Enum trong câu lệnh switch

Enum cũng có thể được sử dụng trong câu lệnh switch để xử lý logic dựa trên các giá trị Enum. Dưới đây là một ví dụ:

enum MauSac {
    Do = "red",
    Xanh = "green",
    XanhDương = "blue",
}

const mauXe = MauSac.Do;

switch (mauXe) {
    case MauSac.Do:
        console.log("Xe có màu đỏ.");
        break;
    case MauSac.Xanh:
        console.log("Xe có màu xanh.");
        break;
    case MauSac.XanhDương:
        console.log("Xe có màu xanh dương.");
        break;
    default:
        console.log("Màu không xác định.");
}

Kết hợp giữa các Enum

Bạn có thể kết hợp nhiều Enum lại với nhau bằng cách sử dụng ký tự |. Dưới đây là ví dụ:

enum Tuoi {
    TreEm = 0,
    NguoiLon = 1,
}

enum GioiTinh {
    Nam = "Nam",
    Nu = "Nu",
}

type Nguoi = {
    tuoi: Tuoi;
    gioiTinh: GioiTinh;
}

const nguoiLonNam: Nguoi = {
    tuoi: Tuoi.NguoiLon,
    gioiTinh: GioiTinh.Nam,
};

Trong ví dụ trên, mình đã kết hợp hai Enum Tuoi và GioiTinh để định nghĩa kiểu dữ liệu cho đối tượng Nguoi.

Giá trị tùy chỉnh và ánh xạ ngược

Gán giá trị tùy chỉnh cho các thành viên Enum

Trong Enum, bạn có khả năng gán giá trị tùy chỉnh cho các thành viên thay vì sử dụng giá trị mặc định (số hoặc chuỗi). Điều này có thể hữu ích khi bạn muốn định rõ các giá trị hằng số có ý nghĩa cụ thể. Dưới đây là ví dụ:

enum MauSac {
    Do = "FF0000",
    Xanh = "00FF00",
    XanhDương = "0000FF",
}

Trong ví dụ này, mình đã gán các mã màu HEX tương ứng với các màu sắc.

Sử dụng ánh xạ ngược để lấy khóa Enum từ giá trị

Đôi khi, bạn có thể cần lấy tên của thành viên Enum từ giá trị hằng số. TypeScript cho phép sử dụng ánh xạ ngược để thực hiện điều này. Dưới đây là ví dụ:

enum MauSac {
    Do = "FF0000",
    Xanh = "00FF00",
    XanhDương = "0000FF",
}

function layTenMau(mau: MauSac): string {
    for (const key in MauSac) {
        if (MauSac[key] === mau) {
            return key;
        }
    }
    return "Khong tim thay mau";
}

const tenMau = layTenMau(MauSac.Do);
console.log(tenMau); // In ra: "Do"

Trong ví dụ này, mình đã viết một hàm layTenMau sử dụng ánh xạ ngược để tìm tên của thành viên Enum từ giá trị màu.

Khi nào nên sử dụng Enum?

Những tình huống mà Enum hữu ích

• Sử dụng Enum khi bạn cần biểu diễn một tập hợp các giá trị cố định, như ngày trong tuần, màu sắc, hoặc trạng thái.
• Sử dụng Enum khi bạn muốn đảm bảo tính rõ ràng và đọc mã nguồn, giúp dễ dàng hiểu và bảo trì mã.
• Sử dụng Enum khi bạn muốn ánh xạ giá trị tới một ý nghĩa cụ thể, ví dụ: gán màu sắc với mã HEX.

Lợi ích của việc sử dụng Enum cho sự rõ ràng và dễ bảo trì mã nguồn

• Enum giúp tạo mã nguồn dễ đọc và dễ bảo trì bằng cách cung cấp tên có ý nghĩa cho các giá trị hằng số.
• Enum giúp tránh việc sử dụng các số hoặc chuỗi ký tự cứng nhắc, làm tăng tính đáng tin cậy của mã.
• Enum giúp giảm lỗi trong mã nguồn bằng cách giới hạn các giá trị cho một tập hợp cố định, ngăn ngừa việc sử dụng các giá trị không hợp lệ.

Ví dụ minh hoạ

Các ví dụ thực tế về cách sử dụng Enum trong TypeScript

Ngày trong tuần:

Bạn có thể sử dụng Enum để biểu diễn các ngày trong tuần một cách dễ đọc:

enum NgayTrongTuan {
    ThuHai = 1,
    ThuBa = 2,
    ThuTu = 3,
    ThuNam = 4,
    ThuSau = 5,
    ThuBay = 6,
    ChuNhat = 7,
}

Màu sắc

Sử dụng Enum để biểu diễn các màu sắc:

enum MauSac {
    Do = "FF0000",
    Xanh = "00FF00",
    XanhDương = "0000FF",
}

Trạng thái đơn hàng

Sử dụng Enum để biểu diễn trạng thái của các đơn hàng trong ứng dụng quản lý đơn hàng:

enum TrangThaiDonHang {
    ChoXuLy = "Pending",
    DangVanChuyen = "InTransit",
    DaGiao = "Delivered",
    Huy = "Cancelled",
}

Các trường hợp sử dụng trong thực tế

• Khi bạn phải xử lý các tùy chọn cố định, chẳng hạn như lựa chọn ngày trong tuần, trạng thái đơn hàng, hoặc màu sắc trong ứng dụng.
• Khi bạn cần đảm bảo rằng giá trị đầu vào hoặc đầu ra của hệ thống chỉ thuộc vào một tập hợp cố định.
• Khi bạn muốn tạo mã nguồn rõ ràng và dễ đọc, giúp đội phát triển và bảo trì mã dễ dàng hơn.
• Khi bạn muốn sử dụng giá trị hằng số có ý nghĩa cụ thể trong ứng dụng, chẳng hạn như các giá trị màu sắc, trạng thái, hoặc vị trí địa lý.

Kết bài

Enum là một tính năng quan trọng trong TypeScript, giúp bạn định nghĩa và sử dụng các tập hợp giá trị hằng số với tên gọi thay vì sử dụng các giá trị số hoặc chuỗi ký tự cứng nhắc. Sử dụng Enum giúp mã nguồn dễ đọc, rõ ràng, và dễ bảo trì, đồng thời giảm nguy cơ lỗi trong mã.

Mình đã tìm hiểu cách định nghĩa và khai báo Enum, gán giá trị tùy chỉnh cho các thành viên Enum, sử dụng ánh xạ ngược để lấy khóa Enum từ giá trị, và các tình huống sử dụng thực tế của Enum. Enum là một công cụ mạnh mẽ giúp làm cho mã nguồn của bạn dễ đọc và bảo trì, đặc biệt trong các trường hợp đòi hỏi xác định các giá trị hằng số có ý nghĩa cụ thể.

Nếu được sử dụng một cách thông minh, Enum có thể làm cho quá trình phát triển và bảo trì ứng dụng TypeScript trở nên hiệu quả và dễ dàng hơn.