在 TypeScript 中，我们可以使用 decorator 来增强常规的函数。Decorator 是一种特殊类型的声明，它可以附加到类声明、方法、属性或参数上，以修改类的行为。使用 decorator 可以使代码更加简洁、易于维护和扩展。
为什么要使用 decorator？
在日常开发中，我们经常需要对函数进行一些特殊的操作，比如添加缓存、记录日志、验证参数等等。如果每次都手动添加这些逻辑，会导致代码冗余，不易于维护和扩展。而使用 decorator 可以将这些逻辑与函数本身解耦，使代码更加清晰和易于管理。
如何使用 decorator？
在 TypeScript 中，我们可以使用 @ 符号来定义 decorator。下面是一个简单的例子：
-- -------------------- ---- -------
-------- ----------- ---- ---- ------- ----------- ------------------- -
----- -------------- - -----------------
---------------- - ----------------- ------ -
-------------------- ------ ------ ---------
----- ------ - -------------------------- ------
------------------- -- ------ ---- --------
------ -------
--
------ -----------
-
----- ---------- -
----
------ ------- -- -------- ------ -
------ - - --
-
-
----- ---------- - --- -------------
----------------- ---在上面的代码中，我们定义了一个 log 函数作为 decorator。它接受三个参数：target 表示被装饰的类，key 表示被装饰的方法名，descriptor 表示被装饰的方法的描述符。在 log 函数中，我们将原始的方法保存下来，并返回一个新的方法。新的方法在执行原始方法之前，会先打印一条日志，然后执行原始方法，并在执行完毕后再打印一条日志。
在 Calculator 类中，我们使用 @log 装饰器来装饰 add 方法。这样，每次调用 add 方法时，都会先打印一条日志，然后执行原始方法，并在执行完毕后再打印一条日志。最后，我们创建了一个 Calculator 实例，并调用了 add 方法。
运行上面的代码，我们可以看到如下输出：
Calling add with 2 3 Result of add is 5
decorator 的分类
在 TypeScript 中，有三种类型的 decorator：类 decorator、方法 decorator 和属性 decorator。它们分别用于装饰类、方法和属性。
类 decorator
类 decorator 用于装饰类，它接受一个参数，表示被装饰的类。类 decorator 可以用来添加一些元数据或修改类的行为。下面是一个例子：
-- -------------------- ---- -------
-------- ---------------- ---- -
------------------ -------------- -- ----------
-
---------
----- ---------- -
------ ------- -- -------- ------ -
------ - - --
-
-在上面的代码中，我们定义了一个 logClass 函数作为类 decorator。它接受一个参数 target，表示被装饰的类。在 logClass 函数中，我们打印了一条日志，表示类已经被创建。
在 Calculator 类中，我们使用 @logClass 装饰器来装饰类。这样，在创建 Calculator 实例时，会先打印一条日志，表示类已经被创建。
方法 decorator
方法 decorator 用于装饰方法，它接受三个参数：被装饰的类、被装饰的方法名和方法描述符。方法 decorator 可以用来修改方法的行为或添加一些元数据。下面是一个例子：
-- -------------------- ---- -------
-------- ----------------- ---- ---- ------- ----------- ------------------- -
----- -------------- - -----------------
---------------- - ----------------- ------ -
-------------------- ------ ------ ---------
----- ------ - -------------------------- ------
------------------- -- ------ ---- --------
------ -------
--
------ -----------
-
----- ---------- -
----------
------ ------- -- -------- ------ -
------ - - --
-
-在上面的代码中，我们定义了一个 logMethod 函数作为方法 decorator。它接受三个参数：target 表示被装饰的类，key 表示被装饰的方法名，descriptor 表示被装饰的方法的描述符。在 logMethod 函数中，我们将原始的方法保存下来，并返回一个新的方法。新的方法在执行原始方法之前，会先打印一条日志，然后执行原始方法，并在执行完毕后再打印一条日志。
在 Calculator 类中，我们使用 @logMethod 装饰器来装饰 add 方法。这样，每次调用 add 方法时，都会先打印一条日志，然后执行原始方法，并在执行完毕后再打印一条日志。
属性 decorator
属性 decorator 用于装饰属性，它接受两个参数：被装饰的类和属性名。属性 decorator 可以用来添加一些元数据或修改属性的行为。下面是一个例子：
-- -------------------- ---- -------
-------- ------------------- ---- ---- ------- -
--- ----- - ------------
----- ------ - ---------- -
-------------------- ----- -- ------- -----------
------ ------
--
----- ------ - ------------------ ---- -
-------------------- ----- -- ------- --------------
----- - ---------
--
----------------------------- ---- -
---- -------
---- -------
----------- -----
------------- ----
---
-
----- ---------- -
------------
------- ------ - --
------ ------- -- -------- ------ -
----------- - - - --
------ ------------
-
-在上面的代码中，我们定义了一个 logProperty 函数作为属性 decorator。它接受两个参数：target 表示被装饰的类，key 表示被装饰的属性名。在 logProperty 函数中，我们定义了一个 getter 和一个 setter，用来监听属性的读取和设置操作。在设置属性值时，会打印一条日志，表示属性值已经被修改。
在 Calculator 类中，我们使用 @logProperty 装饰器来装饰 result 属性。这样，每次读取或设置 result 属性时，都会打印一条日志，表示属性已经被读取或设置。
总结
在 TypeScript 中，使用 decorator 可以将一些通用的逻辑与类、方法或属性解耦，使代码更加简洁、易于维护和扩展。在使用 decorator 时，我们需要注意装饰器的类型和参数，以及装饰器的执行顺序。同时，我们也可以自定义 decorator，来满足自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fb9f73d10417a222733192