前言
TypeScript 是一种强类型的 JavaScript，拥有更严格的语义和更强大的静态类型检查，旨在提高代码质量和开发效率。它在现代 Web 应用中发挥了重要作用，特别是在大型项目和团队中。本文将介绍 TypeScript 中的装饰器，展示如何通过装饰器优化应用程序，使其更可维护，可扩展和易于测试。
装饰器是什么
装饰器是一种特殊类型的声明，它可以附加到类声明，方法，属性，访问器和参数上。在 TypeScript 中，装饰器使用 @ 符号表示，它们可以在运行时修改类及类中的方法和属性。装饰器在 Angular，NestJS 和其他框架和库中得到了广泛应用，因为它们可以减少重复的代码，增强代码的可读性和可维护性。
装饰器类型
在 TypeScript 中，有三种常见的装饰器类型：
类装饰器
类装饰器用于修改类声明。它们需要接收一个参数，该参数是类的构造函数。类装饰器可以做以下事情：
- 重载类的构造函数
- 添加属性和方法
- 修饰类的元数据
以下是一个简单的例子：
------------ ----- ------- - -- --- - -------- ------------------- --------- - -- --- -
上述示例中，@MyDecorator 是一个类装饰器，MyClass 是一个普通的类声明。MyDecorator 函数将 MyClass 构造函数作为参数。在该装饰器中，可以重载该构造函数，添加属性和方法，修改类的元数据等。
方法装饰器
方法装饰器用于修改类中的方法。它们需要接受三个参数：目标对象，方法名称和方法描述符。在装饰器函数中，可以访问和修改方法，还可以添加元数据和其他功能：
----- ------- -
------------
---------- -
-- ---
-
-
-------- ------------------- ------- ------------ ------- ----------- ------------------- -
-- ---
-MyDecorator 是一个方法装饰器，它附加到 MyClass 的 myMethod() 方法上。装饰器接收三个参数：target 是 MyClass 类的原型，即 MyClass.prototype；propertyKey 是 myMethod 字符串，表示方法名称；descriptor 是 PropertyDescriptor 类型的对象，包含了该方法的一些元数据和描述符。
属性装饰器
属性装饰器用于修改类中的属性。它们需要接受两个参数：目标对象和属性名称。属性装饰器可以访问和修改属性，添加元数据等。
----- ------- - ------------ ----------- ------- - -------- ------------------- ------- ------------ ------- - -- --- -
MyDecorator 是一个属性装饰器，它附加到 MyClass 的 myProperty 属性上。装饰器接收两个参数：target 是 MyClass 类的原型，即 MyClass.prototype；propertyKey 是 myProperty 字符串，表示属性名称。
装饰器示例
以下是一些演示 TypeScript 装饰器如何优化应用程序的示例。
日志记录
我们想要在方法调用前后输出一些日志。我们可以编写一个简单的装饰器来打印日志：
-------- ----------- ---- ---- ------- ----------- ---- -
----- -------------- - -----------------
---------------- - -------- --------- ------ -
--------------------- ------ ------ ---- --------- --------------------------
----- ------ - -------------------------- ------
------------------- ------ -------- ----------------------------
------ -------
--
------ -----------
-
----- ------- -
----
------------- ------- -
------ ------- ---------
-
-
----- -------- - --- ----------
-------------------------------- -- -------- -------- ------ ---- --------- -------------- ------ ----------- ------ -------- -------- ------- ------------MyClass 中的 myMethod() 方法带有 @log 装饰器。当 myMethod() 被调用时，装饰器函数将在它之前和之后输出日志。装饰器函数接收三个参数：目标对象，方法名称和方法描述符。在该函数内部，它将原始方法存储在 originalMethod 变量中，并覆盖 descriptor.value 函数以打印日志并调用原始方法。最后，它返回被重载的方法描述符。
缓存调用结果
我们想要避免多次调用相同的函数，并且自动为我们缓存函数结果。我们可以定义一个 @memoize 装饰器：
-------- --------------- ---- ---- ------- ----------- ---- -
----- -------------- - -----------------
----- -------- - ------------------
---------------- - -------- --------- ------ -
-- ----------------- -
-------------- - --- ------
-
----- ----- - ---------------
----- ------- - ---------------------
-- -------------------- -
------ -------------------
-
----- ------ - -------------------------- ------
------------------ --------
------ -------
--
------ -----------
-
----- ---------- -
--------
------------ ------- -- ------- -
---------------------- ----- --------------
------ - - --
-
-
----- ---- - --- -------------
----------------------------- ---- -- --------- ----- ----------- -
-- --- ---- ----------- ----- ---- --- -------- --------
----------------------------- ---- -- -Calculator 中的 calculate() 方法带有 @memoize 装饰器。装饰器函数将创建一个缓存，将其存储在实例上，并使用该缓存来避免多次计算。装饰器函数接收三个参数：目标对象，方法名称和方法描述符。在该函数内部，它将原始方法存储在 originalMethod 变量中，并覆盖 descriptor.value 函数以使用缓存。每次方法被调用时，装饰器函数尝试从缓存中检索结果。如果已经计算过，则不再执行计算，而是返回缓存的结果。否则，它将继续执行计算，并将结果存储在缓存中。
验证输入参数
我们想要在方法调用之前验证输入参数。我们可以定义一个 @validate 装饰器来实现此功能：
-------- ---------------- ---- ---- ------- ----------- ---- -
----- -------------- - -----------------
---------------- - -------- --------- ------ -
--- ---- - - -- - - ------------ ---- -
-- ---------- -
----- --- ------------ ---- -- -----------
-
-
----- ------ - -------------------------- ------
------ -------
--
------ -----------
-
----- ------- -
---------
------------- ------- -
------ ------- ---------
-
-
----- -------- - --- ----------
------------------------ -- ------ ----- - -- --------MyClass 中的 myMethod() 方法带有 @validate 装饰器。使用装饰器函数检查所有输入参数。如果参数为 null 或 undefined，则抛出错误，否则继续执行原始方法。
结论
TypeScript 装饰器是一种强大的工具，可以帮助我们将通用行为应用于类和其成员。它们可以减少重复的代码，增强代码的可读性和可维护性。在 Angular，NestJS 和其他框架中广泛使用装饰器。通过使用装饰器，我们可以将通用的功能移到装饰器中，并将业务逻辑和代码解耦。这样，我们可以更好地管理和维护我们的代码base，特别是在大型项目和团队中。在开发应用程序时，使用装饰器使得代码可复用，可测试和更容易理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670d196c5f551281025c6655