装饰器是 TypeScript 中一个非常重要的概念，它使得我们可以在不修改代码的情况下给类、方法、属性等增加额外的行为。在这篇文章中，我们将详细介绍 TypeScript 中的装饰器，并且通过实际的案例来加深我们的理解。
什么是装饰器？
装饰器是一种特殊的语法，它能够在不修改源代码的情况下给一个类或者某个类成员（方法、属性等）添加额外的功能。在装饰器中，我们可以定义需要添加的行为，比如在方法执行之前或之后执行某些操作，或者是给属性添加类型检查等。
在 TypeScript 中，我们可以使用 @ 符号来定义装饰器。下面是一个简单的例子：
function hello(target: any) {
console.log(`Hello, ${target.name}!`);
}
@hello
class Person {
name = 'Tom';
}在这个例子中，我们定义了一个名为 hello 的函数，这个函数接受一个参数 target，表示需要被装饰的类。然后我们使用 @hello 将 Person 类进行了装饰。在这个例子中，装饰器只是一个简单的打印操作，它会在 Person 类被创建的时候输出 Hello, Person!。
装饰器的分类
在 TypeScript 中，装饰器可以被分为以下四种类型：
- 类装饰器
- 属性装饰器
- 方法装饰器
- 参数装饰器
类装饰器
类装饰器可以在类被定义之前对类进行装饰，它接受一个参数，这个参数可以是一个构造函数，也可以是一个对象。在类装饰器中，我们可以使用下面几个 API：
target: Function：表示被装饰的类的构造函数。target: Object：表示被装饰的类的原型对象。descriptor: PropertyDescriptor：表示被装饰类的方法、属性等的描述符。
下面是一个简单的例子：
function logClass(target: any) {
console.log(target);
}
@logClass
class Person {
name = 'Tom';
}在这个例子中，我们定义了一个 logClass 装饰器，它会在类被定义的时候输出类的信息。我们使用 @logClass 将 Person 类进行了装饰，当 Person 类被定义的时候，就会输出 Person 的信息。
属性装饰器
属性装饰器可以在类的属性被定义之前对属性进行装饰，它接受两个参数：
target: Object：表示被装饰的类的原型对象。propertyKey: string：表示被装饰的属性的名称。
下面是一个简单的例子：
function logProperty(target: any, key: string) {
console.log(key);
}
class Person {
@logProperty
name = 'Tom';
}在这个例子中，我们定义了一个 logProperty 装饰器，它会在类的属性被定义的时候输出属性的名称。我们使用 @logProperty 将 name 属性进行了装饰，当 Person 类被定义的时候，就会输出 name 的名称。
方法装饰器
方法装饰器可以在类的方法被定义之前对方法进行装饰，它接受三个参数：
target: Object：表示被装饰的类的原型对象。propertyKey: string：表示被装饰的方法的名称。descriptor: PropertyDescriptor：表示被装饰的方法的描述符。
下面是一个简单的例子：
-- -------------------- ---- -------
-------- ----------------- ---- ---- ------- ----------- ------------------- -
-----------------
-
----- ------ -
----------
---------- -
------------------- ---------
-
-在这个例子中，我们定义了一个 logMethod 装饰器，它会在类的方法被定义的时候输出方法的名称。我们使用 @logMethod 将 sayHello 方法进行了装饰，当 Person 类被定义的时候，就会输出 sayHello 的名称。
参数装饰器
参数装饰器可以在类的方法的参数被定义之前对参数进行装饰，它接受三个参数：
target: Object：表示被装饰的类的原型对象。propertyKey: string：表示被装饰的方法的名称。parameterIndex: number：表示被装饰的参数在方法的参数列表中的索引。
下面是一个简单的例子：
-- -------------------- ---- -------
-------- -------------------- ---- ---- ------- ------ ------- -
-------------------
-
----- ------ -
---------------------- ----- ------- -
------------------- -----------
-
-在这个例子中，我们定义了一个 logParameter 装饰器，它会在类的方法的参数被定义的时候输出参数的索引。我们使用 @logParameter 将 name 参数进行了装饰，当 Person 类被定义的时候，就会输出 0（因为 name 是函数的第一个参数）。
装饰器的案例
下面是一些装饰器的实际案例，它们将帮助我们更好地理解装饰器的作用和用法。
类装饰器案例：添加静态方法
下面是一个定义一个类的装饰器，它可以为一个类添加一个静态方法：
-- -------------------- ---- -------
-------- ----------------- ------- - ------------ ------- -- ---------- -- -
------- -- ---------- - ---------- -
------------------- ---------
-
------ -------
-
----------------
----- ------ -
---- - ------
-
--------------- -- -- ------- -------在这个例子中，我们定义了一个 addStaticMethod 装饰器，它接受一个构造函数。在装饰器中，我们将一个静态方法 hello 添加到了这个类中。然后我们使用 @addStaticMethod 将 Person 类进行了装饰。最后，我们调用 Person.hello()，就可以看到输出结果。
属性装饰器案例：类型检查
下面是一个定义一个属性的装饰器，它可以为一个属性添加类型检查：
-- -------------------- ---- -------
-------- -------------------- ---- ---- ------- -
--- ---- - ---------------------------------- ------- -----
----------------------------- ---- -
----- -
------ ----------------
--
---------- -- -
-- ------ ---------- ----- -
--------------- - ------
- ---- -
----- --- -------------- ----- -------- ------- -------- ---------------
-
-
---
-
----- ------ -
----------
----- -------
-
--- --- - --- ---------
-------- - ------ -- --
-------- - ---- -- ------------ ----- ------- -------- -------在这个例子中，我们定义了一个 checkType 装饰器，它接受一个类的原型对象和一个属性名称。在装饰器中，我们使用 Reflect.getMetadata 方法获取了属性的类型，并且使用 Object.defineProperty 方法给这个属性添加了 getter 和 setter 方法。在 setter 方法中，我们判断了新值的类型，如果类型不正确就抛出了一个异常。
方法装饰器案例：性能分析
下面是一个定义一个方法的装饰器，它可以为一个方法添加性能分析：
-- -------------------- ---- -------
-------- --------------- ---- ---- ------- ----------- ------------------- -
--- ------------ - -----------------
---------------- - ---------- -
--- ----- - ------------------
--- ------ - ------------------------ -----------
--- --- - ------------------
------------------- ------ ---- ------ - ------------------ ------
------ -------
--
-
----- --------- -
--------
----------- -
-- ------
------ --- --------------- -- -
------------- -- -
------------- ---- ---------
-- ------
---
-
-
--- ------- - --- ------------
----------------------------- -- -
------------------
---在这个例子中，我们定义了一个 logTime 装饰器，它接受一个类的原型对象、一个方法名称和方法的描述符。在装饰器中，我们将原来的方法覆盖掉，并且在方法执行前后分别输出了时间信息。在方法执行前，我们使用 performance.now() 获取了当前的时间戳，并且在方法执行后再次获取时间戳，然后计算出方法的执行时间。最后，我们返回了方法的执行结果。
总结
装饰器是 TypeScript 中非常重要的概念，它可以让我们在不修改代码的情况下为类、方法、属性等添加额外的行为。在本文中，我们介绍了装饰器的四种类型，分别是类装饰器、属性装饰器、方法装饰器和参数装饰器。我们还通过一些实际的案例演示了装饰器的用法和作用。相信通过本文的介绍，读者们已经对 TypeScript 中的装饰器有了更深入的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475c477968c7c53b02c59a8