随着前端开发日益复杂，JavaScript 已经无法满足我们对类型安全、代码重构以及可维护性的要求。因此，TypeScript 成为了越来越多项目的选择。但是 TypeScript 并不仅仅是给我们提供了一些静态类型检查的能力，它还提供了一种强大的元编程能力，这正是我们在开发过程中需要的灵活性。
本文将介绍 TypeScript 元编程的核心概念：装饰器（Decorators）。我们将学习如何使用装饰器来增强我们的代码，以及如何编写自定义的装饰器。
装饰器概述
装饰器是一种特殊的声明，它可以被附加到类声明、方法、属性以及参数上。装饰器使用 @expression 格式进行定义，其中 expression 必须返回一个函数。
以下是一个简单的装饰器示例：
-------- ----------- --------- -
------------------------
-
----
----- --- -
------------- -
------------------
-
-在上面的代码中，我们定义了一个名为 log 的装饰器，它接受一个参数并将其打印到控制台上。我们还将 log 装饰器应用到了 Foo 类上，这意味着当我们创建 Foo 实例时，log 装饰器将会被调用，并输出 Foo。
类装饰器
类装饰器可以用于类声明中，它们用于修改或增强类的行为。在这里，我们将使用一个类装饰器来确定是否应该添加一个 "Component" 标记到类上。
-------- ----------------- - --------- ------ -- -
------ ---------- ------- - --- --------- ------- -- ------- -- -
------ ----- ------- --- -
-------------------- ------ -
--------------
-- ----------------------------------------- -
---------------- --------- ---- -------- ------------------ ------- ---------
- ---- -
------------ - -----------------------------
------------------------------------------ ----------------
---------------------------------------
-
-
-
-
-
------------
--------- --------
--
----- ------------ -
------- -------- -----------
------------- -
------------------------- -------------
-
-在上面的代码中，我们定义了一个名为 Component 的装饰器，它接受一个名为 config 的参数和一个名为 cls 的目标类。该装饰器使用工厂函数并返回一个新的类，该新类继承了原有的类，并添加了一些特定的行为。
在这里，我们通过 Component 装饰器为 AppComponent 类添加了能力：每次我们使用 AppComponent 创建新实例时，它会将一个带有给定选择器的 div 元素添加到 document.body 中。如果已经存在一个具有相同选择器的组件，则输出相应警告。
属性装饰器
属性装饰器用于申明实例属性或静态属性的值。在这里，我们将使用一个属性装饰器来跟踪一个类的属性是否被赋值。
-------- ------- -
------ ---------------- ---- ---- ------- -
--- ----- - -----------
-- ---------- --- ------------
----------------------------- ---- -
----- -
------ -----
--
------------- -
--------------------- ------ ------- ---- -------- -- -------------
----- - --------
-
--
-
-
----- --- -
--------
---- ------ - -------
------------- -
--------------------- -------------
-------- - -------
--------------------- -------------
-
-在上面的代码中，我们定义了一个名为 Track 的装饰器，它被应用到 Foo 类的 bar 属性上。Track 装饰器使用属性装饰器工厂函数，并通过重新定义属性名 bar 来增加 set 拦截器，set 拦截器将原有的赋值行为包裹在一个额外的日志行为中。
方法装饰器
方法装饰器用于在类的方法上附加元数据。在这里，我们将使用一个方法装饰器来确定一个类的方法是否已被调用。
-------- --------------- ---- ------------ ------- ----------- ------------------- -
----- -------------- - -----------------
---------------- - ----------------- ------ -
----- ------ - -------------------------- ------
---------------- ------ -------------- --- ---- ----------
------ -------
--
------ -----------
-
----- --- -
--------
------ ---- -
---------------------
-
-
----- --- - --- ------
----------在上面的代码中，我们定义了一个名为 CallLog 的装饰器，它附加了元数据到 Foo 类的 bar 方法上，并将其替换为一个新方法。该新方法包装了原有的 bar 方法，并在调用时输出一个日志。
参数装饰器
参数装饰器用于申明一个方法或构造函数的参数的元数据。在这里，我们将使用一个参数装饰器来追踪一个类的构造函数参数。
-------- -------------------- ---- ------------ ------- --------------- ------- -
---------------- -------------------- --------- ------ -------------- --- ---- ---------
-
----- --- -
------------------------- ---- ------- -
-------------- -- --- --- ---------------
-
-
----- --- - --- -------------在上面的代码中，我们定义了一个名为 ParameterLog 的装饰器，并将其应用到了 Foo 构造函数的 bar 参数上。该装饰器接受三个参数：参数的目标实例、方法的名称、参数的索引。
自定义装饰器
现在我们已经看到了装饰器是如何工作的，也了解了官方推荐的装饰器使用方式。但我们也可以编写自己的装饰器来扩展 TypeScript 的元编程能力。
为了演示自定义装饰器的功能，我们将编写一个名为 Upper 的自定义装饰器，它将字符串属性值转换为大写。
-------- ------- -
------ ---------------- ---- ---- ------- -
--- ----- - -----------
----- ------ - ---------- -
------ -------------------
-
----- ------ - ------------------ ------- -
----- - ----------------------
-
----------------------------- ---- -
---- -------
---- ------
--
-
-
----- --- -
--------
---- ------ - -------
-
----- --- - --- -----
-------------------- -- -- -----在上面的代码中，我们定义了一个名为 Upper 自定义装饰器。该装饰器附加到类的属性上，重载了 getter 和 setter 以将字符串转换为大写。我们还可以将自定义装饰器与 TypeScript 的内置装饰器（例如 @Injectable）一起使用以增强应用程序的能力。
结论
在本文中，我们介绍了 TypeScript 的元编程能力中最强大的功能：装饰器。通过装饰器，我们可以轻松地申明类、方法、属性以及参数的元数据，并使用这些元数据来增强我们的代码。我们还编写了一些自定义装饰器来进一步扩展 TypeScript 的能力。希望本文能帮助你了解如何利用 TypeScript 的元编程实现更健壮、更高效的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6703a78ed91dce0dc84bea33