在 TypeScript 中，装饰器是一种特殊类型的声明，它可以被附加到类声明、方法、属性或参数上，以起到一定的修改行为或添加元数据的作用。本文将通过举例的方式，详细讲解 TypeScript 装饰器的使用方法和意义。
装饰器基础
前置条件
在进行本文所述之前，我们需要先了解以下两个概念：
装饰器工厂：一个返回一个装饰器的函数，像下面这样：
function decoratorFactory(args: any) { // 返回一个装饰器函数 return function decorator(target: any, key: string) { // 修改行为或添加元数据的具体操作 } }装饰器：一个函数，接收三个参数：
- 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
- 成员的名字
- 成员的属性描述符
装饰器的具体实现可以通过装饰器工厂来返回。
类装饰器
类装饰器可以被用来修改类的行为，在类被声明之前被声明，像下面这样：
@decorator
class MyClass {
// 类成员定义
}其中 @decorator 就是一个装饰器。
下面我们通过一个例子，介绍类装饰器的具体使用：
-- -------------------- ---- -------
-------- -------------- --------- -
--------------------------- -- ----------
-- ------------- --------------------------------------------------
--------------------
-
-------
----- ------- -
--------- -------
-------------------- ------- -
------------- - --------
-
------- -
------ ------- -------------------
-
-
--- ------- - --- -----------------
----------------------------- -- ------ ------
---------------- - -------------
----------------------------- -- ------ -----------
-- --------------------
------------------------------ - -------- -- -
------------------- ----------
-输出结果如下所示：
Greeter is sealed. Hello, world! Hello, Typescript! TypeError: Cannot add property accessDenied, object is not extensible
从上例可以看出，装饰器 sealed 通过 Object.seal() 方法封闭了类 Greeter，否则在尝试给该类的原型对象添加新属性时会报错。这说明类装饰器可以很好地满足我们对类的行为修改的需求。
方法装饰器
方法装饰器可以被用来修改方法的行为，在方法被声明之前被声明，像下面这样：
class MyClass {
@decorator
myMethod() {
// 方法定义
}
}下面我们通过一个例子，介绍方法装饰器的具体使用：
-- -------------------- ---- -------
-------- ----------------- -------- -
------ -------- -------- ---- ------------ ------- ----------- ------------------- -
--------------------- - ------
--
-
----- ------- -
--------- -------
-------------------- ------- -
------------- - --------
-
------------------
------- -
------ ------- -------------------
-
-
--- ------- - --- -----------------
----------------------------- -- ------ ------
-- ------------- ---------------------------------------
---------------------------------- -- - ---------- -输出结果如下所示：
Hello, world! [ 'greeting' ]
从上例可以看出，装饰器 enumerable 可以修改方法的 enumerable 属性，使其不可枚举。
属性装饰器
属性装饰器可以被用来修改属性的行为，在属性被声明之前被声明，像下面这样：
class MyClass {
@decorator
myProperty: string;
}下面我们通过一个例子，介绍属性装饰器的具体使用：
-- -------------------- ---- -------
-------- -------------------- ------- -
------ -------- -------- ---- ------------ ------- -
--- ----- - --------------------
--- ------ - -------- -- -
------ ---------------- ----------
--
--- ------ - -------- -------- -
----- - -------
--
----------------------------- ------------ -
---- -------
---- -------
----------- -----
------------- ----
---
-
-
----- ------ -
-----------------
----- -------
-
--- ------ - --- ---------
----------- - --------
------------------------- -- ------ -----输出结果如下所示：
Hello, world
从上例可以看出，装饰器 format 可以修改属性的 getter 和 setter 函数，使其满足我们的需要，同时也自动化了代码的书写。
参数装饰器
参数装饰器可以被用来修改函数或方法的参数行为，在方法或函数被声明之前被声明，像下面这样：
class MyClass {
myMethod(@decorator arg: string) {
// 方法定义
}
}下面我们通过一个例子，介绍参数装饰器的具体使用：
-- -------------------- ---- -------
-------- ---------------- ---- ------------ ------- --------------- ------- -
---------------- --------- -- -------- ---------------- - -- -- -------------- --------------- -- -----------
-
----- ------- -
--------- -------
--------------------- -------- ------- -
------------- - --------
-
--------------- -------- ------- -
------ ------- ---------- -------------------
-
-
--- ------- - --- ------------------
------------------------------------输出结果如下所示：
The parameter in position 1 of constructor function of Greeter is required The parameter in position 1 of greet function of Greeter is required Hello, world Person!
从上例可以看出，装饰器 required 可以被用来提示函数或方法某个参数的必要性，避免参数错误导致程序出现问题。
结论
通过以上范例，我们可以看出 TypeScript 装饰器的用途那么广泛，可以是添加某些元数据，修改某些行为等等，可以方便我们在项目中快速的进行开发工作，同时可以大大提高我们的开发效率。虽然装饰器还不是一个标准，但是在实际开发中已经得到了广泛运用。因此，我们需要加强对 TypeScript 装饰器的学习和应用，以提高我们在实际项目中的开发技能和水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6707af02d91dce0dc86b62a0