前言
在 TypeScript 中，Decorator 是一种特殊的声明，它能够被附加到类声明、方法、属性或参数上，以修改类的行为。它是一种元编程的手段，能够帮助我们更加方便地实现一些常见的设计模式和功能。
本文将介绍 TypeScript 中使用 Decorator 的技巧和示例，包括如何定义和使用 Decorator，以及一些常见的使用场景和示例代码。
定义和使用 Decorator
在 TypeScript 中，我们可以使用 @ 符号来表示一个 Decorator，例如：
-- -------------------- ---- -------
-------- ----------- ---- ---- ------- ----------- ------------------- -
----- -------------- - -----------------
---------------- - -------- --------- ------ -
-------------------- ------ ---- ---------- --------------------------
------ -------------------------- ------
--
------ -----------
-
----- ---------- -
----
------ ------- -- ------- -
------ - - --
-
-
----- ---------- - --- -------------
----------------- --- -- ------- --- ---- ---------- --- --在上面的示例中，我们定义了一个 log 的 Decorator，它会在调用 add 方法时打印出方法的名称和参数列表。我们使用 @log 将 Decorator 应用到了 add 方法上，这样在调用 add 方法时就会自动执行 log 方法。
在 Decorator 中，我们可以获取到目标类或方法的相关信息，例如类的构造函数、方法的名称和参数列表等。在上面的示例中，我们使用了 target、key 和 descriptor 这三个参数来获取到目标方法的相关信息。
常见的使用场景
类装饰器
类装饰器可以用来修改类的行为，例如添加静态属性或方法、修改构造函数等。例如：
-- -------------------- ---- -------
-------- ---------------- ---- -
------------------ -------------- -- ----------
-
---------
----- ---------- -
------ -- - -----
------ ------- -- ------- -
------ - - --
-
-
--------------------------- -- ----在上面的示例中，我们定义了一个 logClass 的 Decorator，它会在类定义时打印出类的名称。我们使用 @logClass 将 Decorator 应用到了 Calculator 类上，这样在定义 Calculator 类时就会自动执行 logClass 方法。
方法装饰器
方法装饰器可以用来修改方法的行为，例如添加日志、修改参数等。例如：
-- -------------------- ---- -------
-------- ----------------- ---- ---- ------- ----------- ------------------- -
----- -------------- - -----------------
---------------- - -------- --------- ------ -
-------------------- ------ ---- ---------- --------------------------
------ -------------------------- ------
--
------ -----------
-
----- ---------- -
----------
------ ------- -- ------- -
------ - - --
-
-
----- ---------- - --- -------------
----------------- --- -- ------- --- ---- ---------- --- --在上面的示例中，我们定义了一个 logMethod 的 Decorator，它会在调用 add 方法时打印出方法的名称和参数列表。我们使用 @logMethod 将 Decorator 应用到了 add 方法上，这样在调用 add 方法时就会自动执行 logMethod 方法。
属性装饰器
属性装饰器可以用来修改属性的行为，例如添加验证、修改默认值等。例如：
-- -------------------- ---- -------
-------- ------------------- ---- ---- ------- -
--- ----- - ------------
----- ------ - -------- -- -
-------------------- ------- -----------
------ ------
--
----- ------ - -------- -------- ---- -
-------------------- ------ -- ------------
----- - -------
--
----------------------------- ---- -
---- -------
---- -------
----------- -----
------------- -----
---
-
----- ---------- -
------------
------- ------ - --
------ ------- -- ------- -
----------- - - - --
------ ------------
-
-
----- ---------- - --- -------------
----------------- --- -- ------- ------ -- -
------------------------------- -- ------- ------- -在上面的示例中，我们定义了一个 logProperty 的 Decorator，它会在获取或设置 result 属性时打印出属性的名称和值。我们使用 @logProperty 将 Decorator 应用到了 result 属性上，这样在获取或设置 result 属性时就会自动执行 logProperty 方法。
参数装饰器
参数装饰器可以用来修改方法的参数，例如添加验证、修改默认值等。例如：
-- -------------------- ---- -------
-------- -------------------- ---- ---- ------- ------ ------- -
----- -------------- - ------------
----------- - -------- --------- ------ -
-------------------- ------ ---- ---------- --------------------------
----------- - ----------- - --
------ -------------------------- ------
--
-
----- ---------- -
----------------- -- ------- ------------- -- ------- -
------ - - --
-
-
----- ---------- - --- -------------
----------------- --- -- ------- --- ---- ---------- --- --在上面的示例中，我们定义了一个 logParameter 的 Decorator，它会在调用 add 方法时打印出方法的名称和参数列表，并将参数加 1。我们使用 @logParameter 将 Decorator 应用到了 a 和 b 参数上，这样在调用 add 方法时就会自动执行 logParameter 方法。
总结
在 TypeScript 中，Decorator 是一种元编程的手段，能够帮助我们更加方便地实现一些常见的设计模式和功能。本文介绍了 TypeScript 中使用 Decorator 的技巧和示例，包括如何定义和使用 Decorator，以及一些常见的使用场景和示例代码。希望本文能够帮助大家更好地理解和应用 Decorator。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65654e2ed2f5e1655de91565