Cách sử dụng Enums trong TypeScript
Một enum, hoặc một kiểu liệt kê, 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.
Enums cung cấp một cách để biểu diễn một tập hợp giá trị cố định dưới dạng hằng số. Chúng có thể giúp làm cho mã của bạn biểu cảm hơn và tự viết tài liệu bằng cách đặt tên có ý nghĩa cho các giá trị cụ thể. Tại đây, bạn sẽ tìm hiểu cách sử dụng enum trong TypeScript.
Mục Lục
Tạo một Enum
Enums thường đại diện cho một số tùy chọn cố định cho một giá trị nhất định. Ví dụ: một enum đại diện cho các màu cơ bản có thể có các giá trị cố định cho Đỏ, Vàng và Xanh lam.
Enums đại diện cho dữ liệu dưới dạng một tập hợp các cặp khóa/giá trị được gọi là thành viên enum. Khóa phải luôn là một chuỗi. Tuy nhiên, giá trị—một số tăng tự động theo mặc định—có thể là số, chuỗi hoặc được tính toán.
Bạn có thể tạo một enum bằng ngôn ngữ TypeScript bằng cách sử dụng liệt kê từ khóa. Theo sau nó với tên của enum và một cặp dấu ngoặc nhọn ({}) chứa các thành viên enum. Một quy ước đặt tên JavaScript phổ biến nói rằng tên enum phải bắt đầu bằng chữ in hoa.
enum Direction {
Up,
Down,
Left,
Right
}
Ví dụ này có một enum gọi là Phương hướng. Enum có một thành viên đại diện cho mỗi hướng: Lên, Xuống, Trái và Phải.
Vì mã này không chỉ định giá trị cho từng khóa nên TypeScript sẽ tự động gán giá trị. Thành viên đầu tiên, Up, sẽ có giá trị là 0. Các thành viên còn lại, mỗi thành viên sẽ có giá trị lớn hơn 1 so với thành viên trước đó. Bạn có thể khai báo rõ ràng điều này nếu cảm thấy khó nhớ:
enum Direction {
Up = 0,
Down = 1,
Left = 2,
Right = 3,
}
Hoặc bạn có thể khai báo rõ ràng các giá trị khác nhau, để lại các giá trị không được khai báo để tiếp tục tăng dần như trước:
enum Status {
Active = 9,
Inactive,
}
Trong ví dụ này, thành viên Không hoạt động có giá trị là 10. Hành vi này áp dụng cho các enum chỉ có giá trị số, không áp dụng cho các chuỗi có thành viên chuỗi hoặc không đồng nhất.
Các loại khác nhau của Enum
Enums trong TypeScript có một loại ẩn mà chúng dựa trên loại giá trị mà các thành viên của chúng nắm giữ. Loại phổ biến nhất là enum số, có hành vi mà phần trước đề cập, nhưng có hai biến thể.
Chuỗi Enums
Chuỗi enum là một enum trong đó tất cả các thành viên của nó đều là chuỗi. Không giống như enum số, nơi các giá trị được gán tự động, bạn phải khởi tạo từng thành viên bằng một chuỗi:
enum PrimaryColors {
Red = "RED",
Yellow = "YELLOW",
Blue = "BLUE"
}
Mặc dù các 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
Các enum không đồng nhất là các enum chứa cả thành viên số và chuỗi. Ví dụ:
enum Result {
Success = "SUCCESS",
Failure = 0
}
Các enum không đồng nhất rất hữu ích khi bạn có các thành viên enum yêu cầu các loại giá trị khác nhau dựa trên ngữ cảnh hoặc ý nghĩa cụ thể của từng thành viê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 viên Enum được tính toán và không đổi
Mỗi thành viên enum có một giá trị, có thể là hằng số hoặc được tính toán.
Thành viên Enum không đổi
Thành viên enum là hằng số nếu nó thỏa mãn bất kỳ điều kiện nào dưới đây.
- Nó là thành viên đầu tiên của enum và không có bộ khởi tạo.
- Nó không có bộ khởi tạo và thành viên enum trước đó là một hằng số.
- Nó được khởi tạo với một biểu thức enum không đổi.
Theo tài liệu TypeScript, Biểu thức enum không đổi là tập hợp con của biểu thức TypeScript có thể được đánh giá đầy đủ tại thời điểm biên dịch. Chẳng hạn, một chuỗi hoặc một chữ số.
Ví dụ: các thành viên của enums trong khối mã bên dưới đều không đổi:
enum Direction {
Up,
Down,
Left,
Right
}
enum Weekday {
Monday = 1,
Tuesday,
Wednesday,
Thursday,
Friday
}
enum Season {
Spring = "SPRING",
Summer = "SUMMER",
Autumn = "AUTUMN",
Winter = "WINTER"
}
Khi bạn chuyển đổi các thành viên enum không đổi thành JavaScript đơn giản, mã đượ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 đã biên dịch của Season enum:
var Season;
(function (Season) {
Season["Spring"] = "SPRING";
Season["Summer"] = "SUMMER";
Season["Autumn"] = "AUTUMN";
Season["Winter"] = "WINTER";
})(Season || (Season = {}));
Thành viên Enum được tính toán
Bạn có thể sử dụng các thành viên enum được tính toán để gán giá trị cho các thành viên enum dựa trên biểu thức hoặc các phép tính độ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)
Các Kích cỡ enum có ba thành viên: Bé nhỏ, Trung bìnhVà Lớn. Nó gán giá trị 1 cho thành viên Small một cách rõ ràng. Các Trung bình Và Lớn thành viên sử dụng một chức năng tính toán kích thước để tính toán các giá trị của chúng trong thời gian chạy.
Khi làm việc với các thành viên enum được tính toán, điều quan trọng cần lưu ý là các giá trị không được biết cho đến khi chạy. Điều này có thể gây ra các lỗi thời gian chạy phức tạp hơn và tiềm ẩn hơn so với các thành viên enum có 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 mã ở trên là phiên bản được biên dịch của Kích cỡ liệt kê. Lưu ý cách TypeScript không bao gồm các giá trị trả về từ phép tínhSize() trong mã JavaScript. Thay vào đó, nó bao gồm lời gọi hàm ban đầu để JavaScript xác định các giá trị trong thời gian chạy.
Truy cập giá trị Enum
Bạn có thể truy cập các giá trị của thành viên enum bằng cách sử dụng ký hiệu dấu chấm đối tượng.
Ví dụ:
enum Direction {
Up = 0,
Down = 1,
Left = 2,
Right = 3,
}console.log(Direction.Left)
Đảo ngược ánh xạ số Enums
Ánh xạ ngược trong enum số đề cập đến khả năng tìm nạp tên thành viê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ó thể cần phải giải mã.
Theo 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ể thực hiện ánh xạ ngược theo cách thủ công để truy xuất thành viên enum dựa trên giá trị của nó.
Ví dụ:
enum Direction {
Up = 1,
Down,
Left,
Right
}function getDirectionName(directionValue: number): string {
const directionName = Direction[directionValue];
return directionName;
}
console.log(getDirectionName(1));
console.log(getDirectionName(3));
Cái này getDirectionName chức năng thực hiện ánh xạ ngược bằng cách truy cập tên thành viên enum sử dụng giá trị của nó làm chỉ mục. Các chức năng có một hướnggiá trị làm đối số và truy xuất tên thành viên enum tương ứng bằng cách sử dụng Phương hướng[directionValue].
Ánh xạ ngược có thể hữu ích trong các tình huống mà bạn có một giá trị số và cần xác định tên thành viên enum tương ứng. Nó cung cấp một cách thuận tiện để làm việc với enum theo cả hướng thuận và nghịch.
Có nhiều ứng dụng của Enums
Bạn có thể sử dụng enum trong nhiều tình huống khác nhau, chẳng hạn như xử lý câu lệnh chuyển đổi, xác định tham số chức năng, ánh xạ dữ liệu và biểu thị các lựa chọn hoặc cài đặt.
Cho dù bạn cần đại diện cho một tập hợp hữu hạn các tùy chọn hay quản lý các chuyển đổi trạng thái phức tạp, enums trong TypeScript là một công cụ có giá trị để nâng cao tính rõ ràng và cấu trúc của mã của bạn.