在 TypeScript 中，装饰器是一种特殊的语法，用于修改类、方法、属性或参数的行为。装饰器可以让我们在不修改现有代码的情况下，为它们添加额外的功能或元数据。本文将探讨 TypeScript 中装饰器的用法，并提供一些示例代码。
装饰器的基本用法
装饰器是一种特殊的注解语法，可以用于类、方法、属性或参数。它们以 @ 符号为前缀，后面跟着一个装饰器工厂函数。例如，下面是一个装饰器工厂函数的示例：
function log(target: any, key: string, descriptor: PropertyDescriptor) {
console.log(`Called ${key}()`);
return descriptor;
}这个函数接收三个参数：目标对象、属性名和属性描述符。在这个示例中，我们简单地打印了一个日志，并返回了原始的属性描述符。接下来，我们可以将这个装饰器应用于一个方法：
-- -------------------- ---- -------
----- ------- -
----
---------- -
------------------- ---------
-
-
----- ---------- - --- ----------
---------------------- -- ------ ---------- -- ------ ------在这个示例中，我们使用 @log 装饰器修饰了 myMethod() 方法。当我们调用 myMethod() 时，装饰器的工厂函数会被调用，并打印出一条日志。然后，原始的 myMethod() 方法会被调用，打印出一条问候语。
装饰器的类型
在 TypeScript 中，装饰器可以分为四种类型：类装饰器、方法装饰器、属性装饰器和参数装饰器。下面将分别介绍这四种装饰器的用法。
类装饰器
类装饰器用于修改类的行为。类装饰器接收一个参数，即类的构造函数。下面是一个类装饰器的示例：
-- -------------------- ---- -------
-------- ----------- ---- -
------------------ -------------- ----------
-
----
----- ------- -
---------- -
------------------- ---------
-
-
----- ---------- - --- ----------
---------------------- -- ------ ------在这个示例中，我们使用 @log 装饰器修饰了 MyClass 类。当我们创建 MyClass 的实例时，装饰器的工厂函数会被调用，并打印出一条日志。
方法装饰器
方法装饰器用于修改方法的行为。方法装饰器接收三个参数，即目标对象、属性名和属性描述符。下面是一个方法装饰器的示例：
-- -------------------- ---- -------
-------- ----------- ---- ---- ------- ----------- ------------------- -
------------------- -----------
------ -----------
-
----- ------- -
----
---------- -
------------------- ---------
-
-
----- ---------- - --- ----------
---------------------- -- ------ ---------- -- ------ ------在这个示例中，我们使用 @log 装饰器修饰了 myMethod() 方法。当我们调用 myMethod() 时，装饰器的工厂函数会被调用，并打印出一条日志。然后，原始的 myMethod() 方法会被调用，打印出一条问候语。
属性装饰器
属性装饰器用于修改属性的行为。属性装饰器接收两个参数，即目标对象和属性名。下面是一个属性装饰器的示例：
-- -------------------- ---- ------- -------- ----------- ---- ---- ------- - --------------------- --------- - ----- ------- - ---- ---------- - ------- -------- - ----- ---------- - --- ---------- ----------------------------------- -- -------- ---------- -- ------ ------
在这个示例中，我们使用 @log 装饰器修饰了 myProperty 属性。当我们访问 myProperty 时，装饰器的工厂函数会被调用，并打印出一条日志。
参数装饰器
参数装饰器用于修改参数的行为。参数装饰器接收三个参数，即目标对象、属性名和参数索引。下面是一个参数装饰器的示例：
-- -------------------- ---- -------
-------- ----------- ---- ---- ------- ------ ------- -
--------------------- -------- -- -----------
-
----- ------- -
------------- -------- ------- -
---------------------
-
-
----- ---------- - --- ----------
--------------------------- --------- -- -------- - -- ---------- -- ------ ------在这个示例中，我们使用 @log 装饰器修饰了 message 参数。当我们调用 myMethod() 时，装饰器的工厂函数会被调用，并打印出一条日志。然后，原始的 myMethod() 方法会被调用，打印出传入的字符串。
装饰器的顺序
如果一个类或方法同时被多个装饰器修饰，它们的执行顺序是从上到下，从外到内。例如，下面是一个同时使用了两个装饰器的示例：
-- -------------------- ---- -------
-------- ------------ ---- -
------------------ -------------- ----------
-
-------- ------------ ---- ---- ------- ----------- ------------------- -
------------------- -----------
------ -----------
-
-----
----- ------- -
-----
---------- -
------------------- ---------
-
-
----- ---------- - --- ----------
---------------------- -- ------ ---------- -- ------ ------在这个示例中，我们同时使用了 @log1 和 @log2 两个装饰器修饰了 MyClass 类和 myMethod() 方法。当我们创建 MyClass 的实例并调用 myMethod() 时，装饰器的工厂函数会按照 @log1 -> @log2 的顺序依次被调用。
装饰器的限制
虽然装饰器可以为类、方法、属性或参数添加额外的功能或元数据，但它们也有一些限制。
首先，装饰器只能应用于类、方法、属性或参数，不能应用于函数或变量。
其次，装饰器的工厂函数只能返回一个值或修改属性描述符，不能修改原始对象或属性。
最后，装饰器的执行顺序是不确定的，不能依赖于它们的执行顺序来实现特定的行为。
结论
装饰器是 TypeScript 中一个非常有用的特性，它可以为类、方法、属性或参数添加额外的功能或元数据。本文介绍了 TypeScript 中装饰器的基本用法和四种类型，以及装饰器的顺序和限制。希望本文对您有所帮助，可以在实际开发中应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6742d3fb99516187acd3ff77