Cách dùng Enum trong TypeScript

Enum là một cấu trúc dữ liệu, cho phép bạn xác định một tập hợp các giá trị được đặt tên. Dưới đây là cách dùng enum trong TypeScript.

Enum cung cấp cách biểu diễn một tập giá trị cố định dưới dạng hằng số. Chúng có thể giúp bạn viết code ấn tượng hơn và tự soạn thảo tài liệu bằng cách đặt tên ý nghĩa cho các giá trị cụ thể.

Tạo Enum

Enum thường đại diện cho một số lựa chọn cố định của một giá trị được cung cấp. Ví dụ, một enum đại diện cho những màu sắc cơ bản có thể chứa giá trị cố định cho Red, Yellow và Blue.

Enum đại diện dữ liệu dưới dạng một cặp khóa/giá trị được gọi là thành viên (thành phần) enum. Khóa này luôn phải là một chuỗi. Tuy nhiên, giá trị - mặc định là một số tự động tăng - có thể là số, chuỗi hoặc được tính toán.

Bạn có thể tạo enum trong ngôn ngữ TypeScript bằng từ khóa enum. Theo sau nó là tên của enum và một cặp dấu ngoặc nhọn ({}) chứa các thành viên của enum. Một quy ước đặt tên JavaScript phổ biến cho biết tên enum phải bắt đầu bằng chữ in hoa.

enum Direction {
  Up,
  Down,
  Left,
  Right
}

Ví dụ này bao gồm enum tên Direction. Enum này có một thành viên đại diện cho từng hướng: Up, Down, Left và Right.

Vì code này không xác định một giá trị cho từng khóa, TypeScript sẽ tự động gán giá trị. Thành phần đầu tiên - Up có giá trị 0. Những thành phần còn lại sẽ lần lượt có một giá trị lớn hơn 1 so với số thành phần đứng trước. Bạn có thể khai báo rõ ràng điều này nếu thấy khó nhớ:

enum Direction {
  Up = 0,
  Down = 1,
  Left = 2,
  Right = 3,
}

Hoặc có thể khai báo những giá trị khác, để lại những giá trị chưa khai báo để tiếp tục tăng dần như trước:

enum Status {
  Active = 9,
  Inactive, // 10
}

Ở ví dụ này, thành phần Inactive có giá trị bằng 10. Hoạt động này áp dụng cho các enum chỉ có giá trị số, không áp dụng cho thành phần chuỗi hoặc không đồng nhất.

Các kiểu enum khác nhau

Enums trong TypeScript có một kiểu ẩn mà chúng dựa trên loại giá trị mà các thành phần của chúng nắm giữ. Loại phổ biến nhất là enum số, có hai biến thể.

Enum chuỗi

Enum chuỗi là một enum mà tất cả thành viên của nó đều là chuỗi. Khác enum số, nơi giá trị tự động được phân bổ, bạn phải khởi tạo từng thành phần với một chuỗi:

enum PrimaryColors {
  Red = "RED",
  Yellow = "YELLOW",
  Blue = "BLUE"
}

Mặc dù enum chuỗi không có thuộc tính tăng tự động nhưng chúng có thể có ý nghĩa hơn nếu bạn tuần tự hóa chúng. Các giá trị của chúng vẫn phải mang tính mô tả, không có tên thành viên, trong khi một tập hợp các giá trị số có thể không tự mô tả.

Enum không đồng nhất

Enum không đồng nhất là enum chứa cả hai thành phần số và chuỗi. Ví dụ:

enum PrimaryColors {
  Red = "RED",
  Yellow = "YELLOW",
  Blue = "BLUE"
}

Enum không đồng nhất hữu ích khi bạn có các thành phần enum yêu cầu kiểu giá trị khác dựa trên ngữ cảnh hoặc ý nghĩa cụ thể của từng thành phần. Tuy nhiên, tài liệu TypeScript không khuyến khích sử dụng các enum không đồng nhất vì chúng gây ra sự phức tạp có thể khiến mã của bạn dễ bị lỗi hơn.

Các thành phần enum được tính toán và không đổi

Mỗi thành phần emum đều có giá trị, chúng có thể là hằng số hoặc được tính toán.

Thành phần enum không đổi

Thành phần enum không đổi nếu nó thỏa mãn bất kỳ điều kiện bên dưới.

1. Thành phần đầu tiên của enum và không có bộ khởi tạo.
2. Không có bộ khởi tạo, enum trước đó là một hằng số.
3. Được khởi tạo với một biểu thức enum không đổi.

Theo tài liệu TypeScript, một biểu thức enum không đổi là tập phụ của biểu thức TypeScript có thể được đánh giá đầy đủ ở thời gian biên dịch. Ví dụ, một chuỗi hoặc một chữ số.

Ví dụ, các thành viên của enum trong khối code bên dưới đều là không đổi:

enum Direction {
  Up,
  Down,
  Left,
  Right
}

// CASE 2
enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

// CASE 3
enum Season {
  Spring = "SPRING",
  Summer = "SUMMER",
  Autumn = "AUTUMN",
  Winter = "WINTER"
}

Khi chuyển đổi các thành viên enum không đổi thành JavaScript đơn giản, code được tạo sẽ sử dụng các giá trị bằng chữ của chúng. Điều này có thể có lợi cho hiệu suất và giúp gỡ lỗi dễ dàng hơn.

Ví dụ, đây là phiên bản đã được dịch của enum Season:

var Season;
(function (Season) {
    Season["Spring"] = "SPRING";
    Season["Summer"] = "SUMMER";
    Season["Autumn"] = "AUTUMN";
    Season["Winter"] = "WINTER";
})(Season || (Season = {}));

Thành phần enum được tính toán

Bạn có thể dùng các thành phần enum được tính toán để phân bổ giá trị sang thành phần enum dựa trên biểu thức hoặc tính toán linh động khác. Ví dụ:

enum Size {
  Small = 1,
  Medium = calculateSize(12),
  Large = calculateSize(5)
}

function calculateSize(value: number): number {
  return value * 5;
}

console.log(Size.Large)

Enum Size có 3 thành phần: Small, Medium và Large. Nó gán rõ ràng giá trị 1 cho thành viên Small một cách rõ ràng. Các thành viên Trung bình và Lớn sử dụng hàm tính toán Kích thước để tính toán các giá trị của chúng khi chạy.

Khi làm việc với các số enum được tính, điều quan trọng là bạn cần ghi lại những giá trị chưa biết cho tới khi runtime. Điều này có thể tăng thêm độ phức tạp và lỗi runtime tiềm ẩn so với các thành phần enum chứa giá trị không đổi.

Ví dụ:

var Size;
(function (Size) {
    Size[Size["Small"] = 1] = "Small";
    Size[Size["Medium"] = calculateSize(12)] = "Medium";
    Size[Size["Large"] = calculateSize(5)] = "Large";
})(Size || (Size = {}));

console.log(Size.Large)

Khối code trên là phiên bản được chuyển mã của enum Size. Lưu ý cách TypeScript không bao gồm các giá trị trả về từ calculateSize() trong code JavaScript(). Thay vào đó, nó bao gồm gọi hàm ban đầu để JavaScript xác định giá trị lúc runtime.

Truy cập giá trị enum

Bạn có thể truy cập các giá trị của thành phần số bằng ký hiệu chấm đối tượng.

Ví dụ:

enum Direction {
  Up = 0,
  Down = 1,
  Left = 2,
  Right = 3,
}

console.log(Direction.Left) // 2

Đảo ngược ánh xạ số enum

Đảo ngược ánh xạ trong enum dạng số tham chiếu tới tính năng tìm nạp tên thành phần enum tương ứng từ giá trị của nó. Điều này có thể đặc biệt hữu ích khi làm việc với các giá trị số mà bạn cần phải giải code.

Mặc định, giá trị enum trong TypeScript được ánh xạ tới, nghĩa là bạn chỉ có thể truy cập giá trị được liên kết với tên. Tuy nhiên, bạn có thể tự đảo ngược ánh xạ để truy xuất số enum dựa trên giá trị của nó.

Ví dụ:

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

function getDirectionName(directionValue: number): string {
  // Reverse mapping
  const directionName = Direction[directionValue];
  return directionName;
}

console.log(getDirectionName(1)); // "Up"
console.log(getDirectionName(3)); // "Left"

Hàm getDirectionName triển khai đảo ngược ánh xạ bằng cách truy cập tên thành phần enum bằng giá trị của nó dưới dạng một index. Hàm này lấy directionValue làm đối số và truy xuất tên thành phần enum tương ứng bằng Direction[directionValue].

Đảo ngược ánh xạ có thể hữu ích trong bối cảnh mà bạn có giá trị số và cần quyết định tên thành phần enum tương ứng. Nó cung cấp một cách tiện lợi để xử lý enum theo cả hai hướng chuyển tiếp và đảo ngược.

Trên đây là những điều bạn cần biết về cách dùng enum trong TypeScript . Hi vọng bài viết hữu ích với các bạn.