TypeScript - Map Pattern: Bạn đã biết công dụng tuyệt vời của nó chưa?

Xin chào, lại là mình - Đức Phúc, anh chàng hơn 6 năm trong nghề vẫn nghèo technical nhưng thích viết Blog để chia sẻ kiến thức bản thân học được trong quá trình “cơm áo gạo tiền” đây. Các bạn có thể theo dõi mình thêm qua một số nền tảng bên dưới nhé:

• Linkedin: https://www.linkedin.com/in/phuc-ngo-728433346
• Viblo: https://viblo.asia/u/NHDPhucIT
• Patreon: https://www.patreon.com/felix_ngo

1. Bài toán

Với TypeScript, chúng ta sẽ thường dùng Type để định nghĩa kiểu dữ liệu cho 1 đối tượng nào đó. Bây giờ, hãy thử tưởng tượng chúng ta có đối tượng là Blog nhé. Với mỗi Blog, chúng ta sẽ có những hành động mà người xem được phép làm như:

• Upvote: Đánh giá bài viết tốt
• Downvote: Đánh giá bài viết chưa tốt hoặc vi phạm
• Bookmark: Ghim bài viết vào Profile
• Support: Đánh dấu bài viết là hữu ích
• Share: Chia sẻ bài viết

Ta sẽ gọi chung những hành động trên là Reactions nhé. Mỗi hành động như vậy, chúng ta sẽ có 2 thuộc tính là:

• count: Tổng số lượt thực hiện hành động
• percentage: Phần trăm lượt thực hiện hành động này trên tổng số lượt xem

2. Triển khai và nhìn nhận vấn đề

Đầu tiên, chúng ta sẽ định nghĩa Type cho Reactions trước nhé. Ví dụ chúng ta sẽ định nghĩa ở file reactions.ts

Tiếp theo, chúng ta sẽ định nghĩa Type cho Blog ở file blogs.ts nha

Việc định nghĩa Type đã xong. Chúng ta sẽ sử dụng nó cho 1 hàm để xây dụng Blog data nhé. MÌnh ví dụ là hàm buildingBlogData ở file prepareData.ts nha:

Các bạn không cần quan tâm đến inputData nhé, mình để kiểu dữ liệu any là vì nó không liên quan đến phần này, cho bài viết ngắn gọn và tránh bị loãng thôi nha

Rồi, có vẻ ổn rồi đấy, vậy vấn đề ở đây là gì? Bây giờ, bạn thử tưởng tượng, là chúng ta cần thêm 1 loại Reactions mới là:

• Clap: Vỗ tay, tán thưởng cho bài viết

Công việc chúng ta cần làm lúc này sẽ là:

• Thêm clap: Reactions vào file blog.ts
• Thêm clap: Reactions vào tham số thứ 2 trong hàm buildingBlogData ở file prepareData.ts
• Tương tự, nếu có nhiều file khác sử dụng danh sách reactions như hàm buildingBlogData, chúng ta cúng sẽ phải sửa từng chỗ đó

Rõ ràng, đó là 1 vấn đề rồi đúng không nào. Thay đổi 1 chút, nhưng phải đi kiểm tra rất nhiều nơi để đảm bảo không có conflict (xung đột) và không bị thiếu sót

3. Giải quyết vấn đề

Mình sẽ tạo thêm 1 file khác là mapType.ts nhé. Và sẽ định nghĩa 1 Type mới như sau:

Ở đây, các bạn thấy mình sẽ dùng Record<string, Reaction>, điều này có nghĩa là: Bất gì thứ gì là string sẽ trở thành key, và giá trị của nó sẽ luôn luôn là Reactions

Lúc này, ở file blog.ts chúng ta sẽ chỉ cần:

Gọn hơn nhiều đúng không nào? Tương tự với file prepareData.ts cho hàm buildingBlogData bạn nhé

Ưu điểm của cách làm này, là dù bạn có thêm bao nhiêu loại Reactions mới đi nữa, chúng ta sẽ không cần sửa các file sử dụng nó, mà chỉ cần thêm key vào Type Reactions là đủ

Tuy nhiên, như mình đã nói ở trên, việc bất kì thứ gì là string có thể trở thành key sẽ hơi rủi ro và khó kiểm soát. Thông thường, chúng ta sẽ cố định danh sách này. Do đó, mình sẽ chỉnh lại file mapType một chút nhé

Các bạn có thể thấy, mình đã tạo thêm 1 Type là ValidReactions chứa danh sách những hành động hợp lệ để làm key của ReactionMap. Do đó, ở ReactionMap, chúng ta sẽ dùng key in ValidReactions thay cho cách viểt trước đó nhé

4. Tổng Kết

Tuyệt, vậy là chúng ta đã biết thêm về ứng dụng của Map Pattern trong TypeScript rồi. Hy vọng bài này hữu ích cho các bạn nhé

Một lần nữa, đừng quên connect với mình để cùng trao đổi nhé

• Linkedin: https://www.linkedin.com/in/phuc-ngo-728433346
• Viblo: https://viblo.asia/u/NHDPhucIT
• Patreon: https://www.patreon.com/felix_ngo