Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Enums là một data type được sử dụng trong các ngôn ngữ lập trình hướng đối tượng như C# và Java. Trong Typescript cũng hỗ trợ data type này. Hôm nay, chúng ta sẽ cùng tìm hiểu về Enums trong Typescript nhé.

Enums trong Typescript

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, các giá trị trong tập hợp này có thể là số hoặc chuỗi.

Khi sử dụng enums, chúng ta có thể tạo các hằng số và giúp chúng có thể dễ dàng quan sát và dễ đọc hơn, tránh sai sót hay nhầm lẫn trong một số trường hợp.

Cú pháp Enums cũng khá đơn giản, chúng ta chỉ cần sử dụng keyword enum:

enum ProgrammingLanguages {
  Javascript,
  C,
  Python,
  Java
}

Trong ví dụ trên, Ta tạo một enum tên là ProgrammingLanguages. Enum này có các enum member là: Javascript, C, Python và Java. Ở đây, giá trị enum member đầu tiên mang giá trị mặc định là 0 và tăng dần giá trị với member tiếp theo. Nó sẽ trông như sau:

  Javascript = 0,
  C = 1,
  Python = 2,
  Java = 3

Chúng ta có thể đặt giá trị khởi tạo cho các enum member, mình lấy một ví dụ như sau:

enum ProgrammingLanguages {
  Javascript = 7,
  C,
  Python,
  Java
}

Với giá trị khởi tạo cho first member7 thì các member tiếp theo sẽ lần lượt có giá trị tăng thêm 1 dựa vào giá trị số của first member. Có nghĩa là lúc này member C có giá trị 8, Python có giá trị 9, Java mang giá trị 10.

Chúng ta có thể gán các giá trị bất kỳ cho enum, ví dụ như sau:

enum ProgrammingLanguages {
  Javascript = 'JAVASCRIPT',
  C = 'C',
  Python = 'Python',
  Java = 'Java'
}

Để truy cập giá trị 1 member bất kỳ trong enum, ta sử dụng giống như cách lấy value của object:

ProgrammingLanguages.Java // => Java
ProgrammingLanguages['Javascript'] // => JAVASCRIPT

Đối với enums có kiểu dữ liệu của enum membersnumeric type thì chúng ta có thể lấy giá trị của member theo cách như sau:

enum ProgrammingLanguages {
  Javascript = 1,
  C,
  Python,
  Java
}

ProgrammingLanguages.C;    // =>  2
ProgrammingLanguages["C"]; // =>  2
ProgrammingLanguages[2];   // =>  C

Như bạn có thể thấy trong ví dụ trên, ProgrammingLanguages[2] trả về tên member là C. Chúng ta có thể thực hiện được là nhờ reverse mapping.

TypeScript có thể compile enum ở trên thành hàm JavaScript sau:

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 1] = "ADMIN";
    Role[Role["READ_ONLY"] = 2] = "READ_ONLY";
    Role[Role["AUTHOR"] = 3] = "AUTHOR";
})(Role || (Role = {}));
console.log(ProgrammingLanguages);

{
  '1': 'ADMIN',
  '2': 'READ_ONLY',
  '3': 'AUTHOR',
  ADMIN: 1,
  READ_ONLY: 2,
  AUTHOR: 3
}

Nhờ reverse mapping ta có thể lấy tên member từ giá trị và ngược lại.

reverse mapping không hỗ trợ member kiểu string mà chỉ hỗ trợ member là numeric type.

Kết luận

Như vậy là chúng ta đã tìm hiểu xong về enums trong Typescript. Hy vọng bài viết giúp ích cho các bạn.

Chúc các bạn học tốt.

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.