TypeScript类装饰器详解与应用

在 TypeScript 中，装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问器、属性或参数上。装饰器使用 @expression 这种形式，其中 expression 求值为一个函数，该函数会在运行时被调用，被装饰的声明信息作为参数传入。

### 无参数的类装饰器

```typescript
function logClass(target: any) {
console.log(target); // 输出构造函数
target.prototype.apiUrl = '动态扩展的属性';
target.prototype.run = function() {
console.log('这是一个 run 方法');
}
}

@logClass
class HttpClient {
constructor() {}
getData(): void {
console.log(11);
}
}

let http = new HttpClient();
console.log(http.apiUrl); // 输出: 动态扩展的属性
http.run(); // 输出: 这是一个 run 方法
```

在这个例子中，`logClass` 装饰器被应用于 `HttpClient` 类。当创建 `HttpClient` 的实例时，装饰器会动态地向类的原型添加 `apiUrl` 属性和 `run` 方法。

### 带参数的类装饰器（装饰器工厂）

```typescript
function decoClass(params: string) {
return function(target: any) {
console.log(target); // 输出构造函数
console.log(params); // 输出传递的参数
target.prototype.apiUrl = params;
}
}

@decoClass('hello')
class Client {
constructor() {}
getData() {}
}

let client = new Client();
console.log(client.apiUrl); // 输出: hello
```

在这个示例中，`decoClass` 是一个装饰器工厂，它接受一个字符串参数，并返回一个新的装饰器函数。这个新的装饰器函数会被应用到 `Client` 类上，使得 `Client` 类的实例拥有一个由参数指定的 `apiUrl` 属性。

通过这些示例，我们可以看到类装饰器在 TypeScript 中的强大功能，它们不仅能够增强类的功能，还能以一种简洁的方式实现代码复用和逻辑分离。