装饰器是 TypeScript 中的一种特殊语法，它可以在类和类的属性和方法上添加一些特殊的元数据。TypeScript 的装饰器是以 @ 符号为前缀的一个函数，它可以被附加到类的声明、方法、属性或参数上，广泛的应用于 Angular、Vue 和 React 等流行的前端框架。本文将介绍 TypeScript 中的装饰器使用教程。
基本语法
我们可以使用 @ 符号来定义一个装饰器，它可以被附加在类、类的属性、方法以及参数上。装饰器的语法如下所示：
@装饰器名称
class MyClass {}其中，装饰器名称 是一个函数，它可以接受三个参数：
- target: 代表被装饰的类。
- propertyKey?: 被装饰类的属性名或方法名。
- descriptor?: 属性或方法的描述符。
下面是一个装饰器的示例：
-- -------------------- ---- -------
-------- ----------- ---- ------------ ------- ----------- ------------------- -
----- -------------- - -----------------
---------------- - -------- --------- ------ -
-------------------- -------------- ------ ------
----- ------ - -------------------------- ------
------------------- -------------- ---- --------- --------
------ -------
--
------ -----------
-
----- ------- -
----
------ ------- -- ------- -
------ - - --
-
-
----- ------- - --- ----------
-------------------------- ----在上面的代码中，我们定义了一个名为 log 的装饰器函数，它会在方法调用前后进行日志输出。然后，我们在 MyClass 的 add 方法上使用了 @log 装饰器，在方法被调用时就会触发 log 函数输出调用日志。
常见的装饰器
类装饰器
类装饰器是被附加在类声明之前的一个函数。类装饰器可以用来修改类的行为。
下面是一个简单的类装饰器的例子：
-- -------------------- ---- -------
-------- ----------- ---- -
-- --------
----- -------- - -------
-- --------
----- --- - -------- --------- ------ -
--------------------- -------- -- ---------------- ------ ------
----- -------- - --- ------------------
-------------------- -------- -- -------------------
------ ---------
--
-- ------
------------------ ----------
-- ------
------------- - -------------------
-- --------
------ ----
-
----
----- ------- -
-- -------
-- -------
-------------- ------- -- ------- -
------ - --
------ - --
-
-
----- ------- - --- ---------- ---
---------------------- -----------在上面的代码中，我们定义了一个名为 log 的装饰器函数，它会在类实例化前后进行日志输出。然后，我们在 MyClass 类上使用了 @log 装饰器，在类被实例化时就会触发 log 函数输出日志。
属性装饰器
属性装饰器是被附加在类的属性上的一个函数。它可以用来修改属性的行为。
下面是一个简单的属性装饰器的例子：
-- -------------------- ---- -------
-------- ----------- ---- ------------ ------- -
--- ----- - --------------------
----- ------ - -------- -- -
---------------- -------------- ---- -------- -------
------ ------
--
----- ------ - -------- ---------- ---- -
---------------- -------------- ---- -------- ----------
----- - ---------
--
----------------------------- ------------ -
---- -------
---- -------
----------- -----
------------- -----
---
-
----- ------- -
----
-- -------
-------------- ------- -
------ - --
-
-
----- ------- - --- -----------
-----------------------
--------- - --
-----------------------在上面的代码中，我们定义了一个名为 log 的装饰器函数，它会在属性的访问时输出日志。然后，我们在 MyClass 类的 x 属性上使用了 @log 装饰器，在属性被访问时就会触发 log 函数输出日志。
方法装饰器
方法装饰器是被附加在类的方法上的一个函数。它可以用来修改方法的行为。
下面是一个简单的方法装饰器的例子：
-- -------------------- ---- -------
-------- ----------- ---- ------------ ------- ----------- ------------------- -
----- -------------- - -----------------
---------------- - -------- --------- ------ -
-------------------- -------------- ------ ------
----- ------ - -------------------------- ------
------------------- -------------- ---- --------- --------
------ -------
--
------ -----------
-
----- ------- -
----
------ ------- -- ------- -
------ - - --
-
-
----- ------- - --- ----------
-------------------------- ----在上面的代码中，我们定义了一个名为 log 的装饰器函数，它会在方法调用前后输出日志。然后，我们在 MyClass 类的 add 方法上使用了 @log 装饰器，在方法被调用时就会触发 log 函数输出日志。
总结
本文介绍了 TypeScript 中的装饰器使用教程。装饰器可以被附加到类、类的属性、方法以及参数上，广泛的应用于 Angular、Vue 和 React 等流行的前端框架。常见的装饰器有类装饰器、属性装饰器以及方法装饰器。它们可以用来修改类、属性和方法的行为，为我们提供了更加灵活和强大的编程方式。希望本文能对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5f22195c405902ee438d0