在 TypeScript 中如何使用装饰器 (Decorator)
装饰器（Decorator）是 TypeScript 中一个非常强大而同时也是较为复杂的特性。它主要用于在对已有代码进行修改时，提供一种更加优雅的方法。简单的说，装饰器就是一个可应用于类、方法、属性或参数上的函数。在 JavaScript 中，我们无法使用装饰器，但在 TypeScript 中，我们可以使用装饰器来对代码进行更加优雅和易于维护的修改。
这篇文章将介绍在 TypeScript 中如何使用装饰器，并会提供一些实际示例代码。本文将会从以下几个部分进行说明：
- 什么是装饰器
- 装饰器的基础语法
- 装饰器的应用场景
- 实际示例代码
什么是装饰器
装饰器是 TypeScript 中重要的语法特性，用于添加元数据到类的定义以及类中的属性、方法、参数等。装饰器的概念是从 ES2017（ECMAScript 2017）引入的，但是在 TypeScript 中装饰器才变得真正有用。
装饰器的基础语法
在 TypeScript 中，装饰器的基础语法大概如下：
// www.javascriptcn.com code example
@decorator
class TestClass {
@decorator
property;
@decorator
method() {
// some code here
}
methodWithParams(@decorator param: any) {
// some code here
}
}可以看到，通过 @ 符号，装饰器可以被直接应用在类、属性、方法或者参数上。
装饰器的应用场景
在 TypeScript 中，装饰器的应用场景非常广泛。下面列举了一些典型的应用场景：
- 类装饰器：用于类的代码修改或者元数据注册。
- 属性装饰器：用于属性值的修改或者元数据注册。
- 方法装饰器：用于方法参数的修改或者元数据注册。
- 参数装饰器：用于函数的参数修改或者元数据注册。
实际示例代码
下面是一个简单的 TypeScript 类：
// www.javascriptcn.com code example
class TestClass {
private _name: string;
private _age: number;
constructor(name: string, age: number) {
this._name = name;
this._age = age;
}
@log
public hello() {
console.log(`Hello, my name is ${this._name}, I am ${this._age} years old.`);
}
}针对上述代码，下面介绍一些装饰器的使用方法。
类装饰器
类装饰器用于类的代码修改或者元数据注册。
下面是一个简单的类装饰器：
function classDecorator(target: any) {
// Some modifications
}装饰器接收一个参数，也就是类本身。我们可以在函数体内对类进行各种修改操作。例如：
function classDecorator(target: any) {
target.prototype.log = (message: string) => {
console.log(`Logged: ${message}`);
}
}这时候，我们就可以在 TestClass 类中使用 log() 方法了：
const test = new TestClass('James', 20);
test.log('hello');方法装饰器
方法装饰器用于方法参数的修改或者元数据注册。
下面是一个简单的方法装饰器：
// www.javascriptcn.com code example
function log(target: any, name: string, descriptor: any) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`${name} args:`, args.join(', '));
const result = originalMethod.apply(this, args);
console.log(`${name} return:`, result);
return result;
}
return descriptor;
}这里的装饰器接收三个参数，分别是 target（当前类），name（当前方法名），descriptor（当前描述符）。
在函数内部，我们把原始函数保存下来，然后将函数体进行修改。在这个例子中，我们添加了 console.log()。
属性装饰器
属性装饰器用于属性值的修改或者元数据注册。
下面是一个简单的属性装饰器：
function readOnly(target: any, key: string) {
const descriptor = Object.getOwnPropertyDescriptor(target, key);
descriptor.writable = false;
Object.defineProperty(target, key, descriptor);
}这里我们把给定的属性标记为只读。
class ReadOnlyClass {
@readOnly
name = 'James';
}
const instance = new ReadOnlyClass();
instance.name = 'Tom'; // Throws a TypeError参数装饰器
参数装饰器用于函数的参数修改或者元数据注册。
下面是一个简单的参数装饰器：
function paramDecorator(target: any, methodName: string, paramIndex: number) {
console.log(`target: ${target.constructor.name} methodName: ${methodName} paramIndex: ${paramIndex}`);
}这里我们通过参数注入方式对方法进行操作。
class TestClass {
hello(@paramDecorator firstName: string, lastName: string) {
console.log(`Hello, ${firstName} ${lastName}`);
}
}这是我们选用 @paramDecorator 装饰器对 TestClass.hello 进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d67994a941bf7134c3e808