Chào các bạn trở lại với series học 15 phút mỗi ngày cùng yeulaptrinh.vn , ở bài học trước, chúng ta đã học về Primitive types, array và tuple, ở phần này, chúng ta sẽ học về Enum, cùng xem Enum là cái gì và nó ứng dụng ra sao nhé.

Enum là gì ?

Enum là một cách để tổ chức, triển khai các giá trị có liên quan. Hiện nay, rất nhiều ngôn ngữ đều có Enum (C/C#/Java ..) và TypeScript cũng vậy. Enums cho phép chúng ta khai báo một tập hợp các hằng số được đặt tên, tức là một tập hợp các giá trị liên quan có thể là giá trị số hoặc chuỗi. Từ đó, chúng ta chia enum thành 3 loại chính:

• Numberic enum
• String enum
• Heterogeneous enum

Chúng ta đi vào các loại cụ thể

Numberic enum

Là các enum lưu trữ các giá trị chuỗi dưới dạng số

enum NumbericEnumExample {
    Bottom,
    Middle,
    Top
}

console.log(NumbericEnumExample.Bottom) // 0
console.log(NumbericEnumExample.Middle) // 1
console.log(NumbericEnumExample.Top) // 2

Khi không gán giá trị, mặc định các giá trị của enum sẽ được gán với các giá trị bắt đầu từ 0, và với mỗi giá trị ngay sau đó thì sẽ tăng thêm 1 đơn vị.

Tương tự, nếu ta gán các giá trị cho chúng, thì những giá trị theo sau cũng sẽ tăng 1 đơn vị từ giá trị phía trước hoặc là bất cứ giá trị nào

enum NumbericEnumExample {
    Bottom ,
    Middle = 10,
    Top,
    Above = 99
    Sky = 105

}

console.log(NumbericEnumExample.Bottom) // 0
console.log(NumbericEnumExample.Middle) // 10
console.log(NumbericEnumExample.Top) // 11
console.log(NumbericEnumExample.Above) // 99
console.log(NumbericEnumExample.Sky) // 105

String enum

Tương tự như nunber enum, ngoại trừ việc các giá trị enum được khởi tạo bằng string chứ không phải giá trị số.

enum NumbericEnumExample {
    Bottom = "BOTTOM",
    Middle = "MIDDLE",
    Top = "TOP"
}

console.log(NumbericEnumExample.Bottom) // BOTTOM
console.log(NumbericEnumExample.Middle) // MIDDLE
console.log(NumbericEnumExample.Top) // TOP

Trong String enum, nếu phần tử phía trước đã được gán giá trị là String thì các phần tử phía sau nó đều bắt buộc phải có giá trị.

enum NumbericEnumExample {
    Bottom = "BOTTOM",
    Middle = "MIDDLE",
    Top // Err: Enum member must have initializer.ts
}

Heterogeneous Enum

Heterogeneous Enum hay là Enum hỗn hợp, nó bao gồm cả String và Number

enum Status { 
    Active = 'ACTIVE', 
    Deactivate = 1, 
    Pending
}

Làm việc với Enum

Enum rất tiện lợi trong việc làm việc cùng nhiều giá trị có liên quan đến nhau

const CARRY: String = "CARRY"
const MID: String = "MIDDLE"
const TOP: String = "TOP"
const SUPPORT: String = "SUPPORT"

Thay vào đó ta sử dụng enum

enum Roles {
    CARRY = "CARRY",
    MID = "MIDDLE",
    TOP = "TOP",
    SUPPORT = "TOP"
}

Việc nhóm lại bằng enum sẽ tiện trong việc quản lý cũng như thuận tiện trong việc kiểm tra của TypeScript

Enum trong TypeScript hỗ trợ reverse mapping – nghĩa là chúng ta có thể truy cập giá trị của một đối tượng và cả tên đối tượng từ giá trị của nó.

enum Status { 
    Active = 'ACTIVE', 
    Deactivate = 1, 
    Pending
}

console.log(Status.Active) // 'ACTIVE'
console.log(Status['Active']) //'ACTIVE'
console.log(Status[2]) // 2

Lý do cho việc trên đó là khi ta log enum Status ở trên ta được

{
  '1': 'Deactivate',
  '2': 'Pending',
  Active: 'ACTIVE',
  Deactivate: 1,
  Pending: 2
}

Chúng ta thử xem sau khi compile enum từ TS sang JS thì ta được gì nhé:

var Status;
(function (Status) {
    Status["Active"] = "ACTIVE";
    Status[Status["Deactivate"] = 1] = "Deactivate";
    Status[Status["Pending"] = 2] = "Pending";
})(Status || (Status = {}));

Vậy là enum Status đã trở thành một object có đầy đủ các tên và thuộc tính tương đương key – value của các field bên trong nó