前言
在前端开发过程中，我们经常会遇到代码重复的问题，例如在多个地方引入同一个方法，多次定义同一段逻辑等问题。这不仅增加了代码量，也使得代码难以维护和修改。为了解决这些问题，我们可以借助 TypeScript 中的装饰器来简化代码，并提高代码的可读性和可维护性。
什么是装饰器？
装饰器是一种特殊的声明，它可以被用来修饰类、方法、属性或参数。装饰器通过 @ 符号来标识，放置于修饰的目标之前。当装饰器被调用时，它可以对目标进行一些处理或者添加一些额外的元数据。
如何定义装饰器？
装饰器可以是一个函数或者一个类，它们的参数和返回值与被修饰的目标有关。一个有效的装饰器应该遵循以下规则：
- 通过
@符号标识装饰器； - 接受至少一个参数，参数类型根据被修饰的目标不同而不同；
- 如果是一个闭包函数，需要返回一个被修饰的函数，否则无需返回任何内容。
下面是一个简单的装饰器示例：
-------- --------------------- --------- -
----------------------- ------------------------
-
-------
----- ------ -
------------------- ----- ------- -
------------------------- ----------
-
-
-- -------
-- ---------- ------
-- ------------ -----装饰器 @logged 将被修饰的类 Person 的构造函数作为参数传入，并嵌套在其中执行，输出装饰信息和实例化信息。
如何使用装饰器？
类装饰器
在 TypeScript 中，装饰器可以用来装饰类。类装饰器可以应用于类的构造函数，它可以做以下几个方面的事情：
- 修改类的行为；
- 添加类的元数据。
下面是一个应用于类的装饰器：
-------- ----------- --------- -
-- ----------
--- -------- - -------
-- -----------------
--- ------- - -------- --------- -
--------------------- -----------
------ --- ------------------
-
-- ---------------------------
----------------- - -------------------
-- -------- ----------
------ --------
-
----
----- ------ -
------------------- ----- ------- -
------------------------- ----------
-
------- -
------------------- --- ---------------
-
-
----- ----- - --- ----------------
--------------
-- -------
-- -------- --------
-- ------------ -----
-- ------ --- -----装饰器 @log 接受一个参数 target，代表被修饰的类的构造函数。在 @log 装饰器内部，构造了一个新的函数 wrapper，它包含原始的构造函数，并在调用时输出“Creating instance”的信息，然后再创建一个新的对象，返回给被装饰的类。最后，使用 wrapper 替换了原来的构造函数。
通过使用类装饰器，我们可以实现多个类之间的代码共享，并增强类的能力。
方法装饰器
方法装饰器应用于类的方法，并且可以被用来监视、修改或者替换方法的定义。
-------- ----------- ---- ----- ------- ----------- ---- -
--- -------------- - -----------------
---------------- - -------- --------- ------ -
-------------------- ------- ------ ------
--- ------ - -------------------------- ------
------------------- -- ------- ---- --------
------ -------
--
------ -----------
-
----- ---------- -
----
------ ------- -- -------- ------ -
------ - - --
-
-
----- ---------- - --- -------------
----------------- ---
-- -------
-- ------- --- ---- --- --
-- ------ -- --- -- -这个例子中的装饰器 @log 接受三个参数。第一个参数 target 是被修饰的类的原型。第二个参数 name 是被修饰的方法的名称。第三个参数 descriptor 是被修饰的方法的定义。在方法装饰器内部，我们可以修改方法的行为，比如像上面的例子一样在方法调用前后输出一些信息。
属性装饰器
属性装饰器应用于类的属性，并且可以被用来监视、修改或者替换属性的定义。
-------- ---------------- ---- ---- ------- -
----------------------------- ---- -
--------- -----
---
-
----- ------ -
---------
---- - --------
-
----- ----- - --- ---------
---------- - ------ -- ---------- ------ ------ -- ---- ---- -------- ------ -- ------ -------- --------这个例子中的装饰器 @readonly 实现了一个只读属性。在属性装饰器中，我们可以使用 Object.defineProperty 来修改属性的定义。
结论
通过使用装饰器，我们能够简化代码，提高代码的可读性和可维护性，从而更好地组织和管理代码。虽然装饰器在 ECMAScript 规范中并不是标准特性，但是 TypeScript 实现了装饰器，并在 Angular 这样的实际项目中广泛使用，可以说是前端开发中必备的一种技术了。
参考
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6735dc070bc820c58250dfdf