Giới thiệu nhẹ nhàng về Trình trang trí TypeScript

Làm sáng tỏ mô hình mạnh mẽ này bằng cách xây dựng trang trí từ đầu

Ảnh của Cederic X trên Bapt

Trình trang trí là một trong những tính năng mạnh mẽ nhất mà Typecript cung cấp, cho phép chúng tôi mở rộng chức năng của các lớp và phương thức theo cách sạch sẽ và khai báo. Các nhà trang trí hiện đang là đề xuất giai đoạn 2 cho JavaScript nhưng đã trở nên phổ biến trong hệ sinh thái TypeScript, được sử dụng bởi các dự án nguồn mở hàng đầu như Angular và Inversify.

Tuy nhiên, những người trang trí tuyệt vời có thể là, hiểu cách họ hành động có thể gây khó chịu. Trong bài viết này, tôi nhằm mục đích cung cấp cho bạn một sự hiểu biết vững chắc về các nhà trang trí trong ít hơn 5 phút thời gian của bạn. Vì vậy, sau đó, những trang trí này là gì?

Trình trang trí chỉ là một cú pháp rõ ràng để gói một đoạn mã với một hàm

Trang trí là một tính năng thử nghiệm, vì vậy chi tiết triển khai có thể thay đổi trong tương lai, nhưng các nguyên tắc cơ bản là vĩnh cửu. Để cho phép sử dụng trình trang trí, hãy thêm "ExperDecorators": đúng với các tùy chọn trình biên dịch của bạn trong tệp tsconfig.json và đảm bảo mục tiêu dịch chuyển của bạn là ES5 trở lên.

Được rồi, đồng hồ đang kêu tích tắc, vì vậy hãy để có được mã hóa!

Hành trình bắt đầu với lớp trang trí

Giả sử bạn có một doanh nghiệp thuê các lâu đài cũ cho các gia đình hùng mạnh và bạn đang làm việc để thiết lập máy chủ HTTP. Bạn đã quyết định xây dựng từng điểm cuối của API của mình dưới dạng một lớp và các phương thức công khai của lớp sẽ tương ứng với các phương thức HTTP. Điều này có thể trông giống như thế:

Đó là một khởi đầu tốt đẹp, và bây giờ chúng ta cần một cách đơn giản để đăng ký và mỗi lớp trong số các lớp này làm điểm cuối trong máy chủ HTTP của chúng tôi. Hãy tạo ra một chức năng đơn giản để chăm sóc điều đó. Hàm của chúng ta sẽ lấy một lớp làm đối số và thêm một thể hiện của lớp đó làm điểm cuối cho máy chủ của chúng ta. Thích như vậy:

Không có bạn để ý, chúng tôi đã viết trang trí đầu tiên của chúng tôi! Đúng vậy, nó rất đơn giản. Tất cả một trình trang trí là, là một hàm lấy một lớp làm đối số, và ở đây chúng ta có nó. Bây giờ thay vì gọi registerEndpoint theo cách thông thường, bạn có thể trang trí các lớp bằng @registerEndpoint. Bạn có tin tôi không? Có một cái nhìn:

Chúng tôi đã trang trí đầu tiên của chúng tôi và chạy, và chúng tôi chỉ mất 2 phút hoặc lâu hơn. Bây giờ chúng tôi đã sẵn sàng để lặn sâu hơn và giải phóng sức mạnh của trình trang trí phương pháp.

Giải phóng sức mạnh của Trình trang trí phương pháp

Hãy để nói rằng chúng tôi muốn bảo vệ một số điểm cuối của chúng tôi để chỉ những người dùng được xác thực mới có thể truy cập chúng. Để làm điều đó chúng ta có thể tạo ra một trang trí mới gọi là bảo vệ. Hiện tại, tất cả các trình trang trí của chúng tôi sẽ làm là thêm phương thức được bảo vệ vào một mảng có tên là ManagedMethods.

Như bạn có thể thấy, trình trang trí phương thức có 3 đối số:

  1. đích - Nguyên mẫu của lớp chúng ta (hoặc hàm tạo của lớp nếu phương thức trang trí là tĩnh).
  2. propertyKey - Tên của phương thức trang trí.
  3. mô tả - Một đối tượng giữ chức năng trang trí và một số dữ liệu meta liên quan đến nó.

Cho đến nay chúng tôi chỉ đọc thông tin liên quan đến các lớp học và phương pháp chúng tôi trang trí, nhưng niềm vui thực sự bắt đầu khi chúng tôi bắt đầu thay đổi hành vi của họ. Chúng tôi có thể làm điều đó bằng cách đơn giản trả lại một giá trị từ trang trí. Khi một trình trang trí phương thức trả về một giá trị, giá trị này sẽ được sử dụng thay cho mô tả ban đầu (giữ phương thức ban đầu).

Hãy để thử nó bằng cách tạo ra một trình trang trí được gọi là không, thay thế phương thức ban đầu của chúng tôi bằng một phương thức in ra nope nope bất cứ khi nào nó được gọi. Để làm điều đó, tôi sẽ ghi đè lên descriptor.value, đây là nơi lưu trữ chức năng ban đầu, với chức năng của tôi:

Đến thời điểm này, chúng tôi đã chơi xung quanh với những điều cơ bản của các nhà trang trí phương pháp, nhưng thiên đường đã tạo ra bất cứ điều gì hữu ích. Những gì tôi dự định làm tiếp theo là viết lại trang trí bảo vệ, nhưng lần này thay vì chỉ ghi lại tên của các phương thức được trang trí, nó thực sự sẽ chặn các yêu cầu trái phép.

Bước tiếp theo này sẽ phức tạp hơn một chút so với những bước cuối cùng vì vậy hãy đồng ý với tôi. Dưới đây là các bước chúng ta nên thực hiện:

  1. Trích xuất hàm ban đầu từ bộ mô tả và lưu nó ở một nơi khác để sử dụng sau.
  2. Ghi đè mô tả.value bằng một hàm mới có cùng các đối số như ban đầu.
  3. Trong chức năng mới của chúng tôi, hãy kiểm tra xem yêu cầu có được xác thực không và nếu không có lỗi.
  4. Cuối cùng, cũng trong hàm mới của chúng ta, giờ đây chúng ta có thể gọi hàm ban đầu với các đối số cần thiết, nắm bắt giá trị trả về của nó và trả về nó.

Kinh ngạc! Chúng tôi có một trang trí bảo vệ hoạt động đầy đủ. Bây giờ thêm hoặc loại bỏ bảo vệ khỏi phương pháp của chúng tôi là một miếng bánh.

Lưu ý làm thế nào trong dòng 8 chúng ta liên kết hàm ban đầu với điều này, vì vậy nó sẽ có quyền truy cập vào thể hiện của lớp. Ví dụ, nếu không có dòng này, phương thức get () của chúng tôi sẽ có thể đọc this.houses.

Chúng tôi đã đi một cách khá xa nhưng lại có nhiều người đi trước chúng tôi. Tại thời điểm này, tôi khuyến khích bạn dành một chút thời gian và đảm bảo rằng bạn hiểu từng chút về những gì chúng tôi đã làm cho đến nay. Để giúp bạn dễ dàng hơn, tôi đặt tất cả các mã ở trên vào sân chơi ở đây để bạn có thể chạy nó, thay đổi và phá vỡ nó cho đến khi bạn cảm thấy bạn hoàn toàn nhận được nó.

Tăng thêm sức mạnh với các nhà máy trang trí

Hãy nói rằng bây giờ chúng tôi muốn thêm một điểm cuối mới để trả lại các thành viên gia đình Stark, tại đường dẫn / gia đình / stark / thành viên. Chà, rõ ràng là chúng ta có thể tạo ra một lớp với tên đó, vậy chúng ta sẽ làm gì?

Những gì chúng ta cần ở đây là một cách để truyền các tham số sẽ ra lệnh cho hành vi của chức năng trang trí của chúng ta. Hãy để một cái nhìn khác về trang trí đăng ký cũ tốt của chúng tôi:

Để gửi tham số cho người trang trí của chúng tôi, chúng tôi cần chuyển đổi nó từ một nhà trang trí thông thường sang một nhà máy trang trí. Một nhà máy trang trí là một chức năng trả về một trang trí. Để tạo một cái, tất cả những gì chúng ta cần là bọc trang trí ban đầu của chúng tôi, như thế này:

Bây giờ chúng tôi cũng có thể bọc trang trí bảo vệ của mình, vì vậy nó sẽ nhận được mã thông báo dự kiến ​​dưới dạng tham số:

Phần kết luận

Tại thời điểm này, bạn có một sự hiểu biết tốt về các nhà trang trí, cách họ làm việc, cũng như sức mạnh và tính biểu cảm mà họ cho phép chúng tôi là lập trình viên. Trong bài viết này, tôi đã đề cập đến các kỹ thuật hữu ích và phổ biến nhất, tuy nhiên, có rất nhiều thứ để học. Trình trang trí trong Typecript có thể được áp dụng không chỉ cho các lớp và phương thức, mà còn cho các thuộc tính của các lớp và các đối số phương thức. Tôi hy vọng rằng với sự hiểu biết mới có được của bạn về các nhà trang trí, bạn sẽ có thể nhận nó dễ dàng từ tài liệu này. Như mọi khi, tôi đặt tất cả các bài viết này mã Code trong sân chơi để tiếp tục và chơi!

yay, bạn đã làm nó

Nếu bạn thích bài viết này, hãy vỗ tay cho nó để nhiều người sẽ tìm thấy nó và cũng thích, và nếu bạn muốn xem thêm những thứ tôi viết, bạn hãy chào đón để theo dõi tôi. Hãy cho tôi biết trong các ý kiến ​​nếu bạn có bất kỳ câu hỏi.

Ngoài ra, bạn có thể muốn xem các bài viết TypeScript khác của tôi về khái quát và gia tăng hoặc về thiết kế lớp.