typescript 中的装饰器是一项强大的功能，允许您添加元数据或修改类、方法、属性或参数的行为。它们经常用在 angular 等框架中来丰富组件和服务。无论您是初学者还是经验丰富的开发人员，本文都会指导您逐步创建自己的装饰器来增强您的 typescript 应用程序。
先决条件
开始之前，请确保您具备以下条件：
对 typescript 的基本了解。 使用 tsconfig.json 文件中启用的 experimentaldecorators 选项配置的 typescript：1
2
3
4
5
{
"compileroptions": {
"experimentaldecorators": true
}
}
什么是装饰器？
装饰器是应用于类、方法、属性或参数的函数。在符号@前面，装饰器可以修改或丰富它所附加的元素。其主要用途包括：
添加元数据：用于提供有关类或属性的附加信息。 修改行为：允许您动态更改方法或类的操作。 注入依赖项：在模块化架构中实用。创建组件装饰器
第 1 步：定义装饰器
我们将创建一个装饰器，将 componentname 属性添加到类中。
1
2
3
4
5
function component(name: string) {
return function (constructor: function) {
constructor.prototype.componentname = name;
};
}
说明
：
该装饰器接收名称字符串并将其添加为类原型上的属性。此类的所有实例都可以访问此属性。第2步：应用装饰器
让我们将装饰器应用到一个类中。
1
2
3
4
5
6
@component(moncomposant)
class moncomposant {
constructor() {
console.log(`le nom du composant est : ${this.componentname}`);
}
}
第三步：测试装饰器
让我们创建该类的一个实例来检查它是如何工作的。
1
2
const composant = new moncomposant();
// affiche : le nom du composant est : moncomposant
创建输入装饰器
第 1 步：定义输入装饰器
此装饰器监视并记录属性的更改。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function input() {
return function (target: any, propertykey: string) {
let value: any;
const getter = () => {
return value;
};
const setter = (newvalue: any) => {
console.log(`la valeur de ${propertykey} a été mise à jour : ${newvalue}`);
value = newvalue;
};
object.defineproperty(target, propertykey, {
get: getter,
set: setter,
enumerable: true,
configurable: true,
});
};
}
说明
：
装饰器使用 object.defineproperty 来拦截对属性的更改。这允许您添加自定义逻辑，例如更改日志记录。第 2 步：应用输入装饰器
让我们将其应用到属性上。
1
2
3
4
5
6
7
8
class moncomposant {
@input()
public nom: string;
constructor(nom: string) {
this.nom = nom;
}
}
第 3 步：测试输入装饰器
更改属性观察效果。
1
2
3
const composant = new MonComposant(Composant Initial);
composant.nom = Nouveau Composant;
// Affiche : La valeur de nom a été mise à jour : Nouveau Composant
结论
创建组件装饰器来丰富类。 实现输入装饰器来监视属性更改。这些简单的示例展示了装饰器如何提高代码的可读性和可维护性。探索更多官方 typescript 文档以发现更高级的应用程序，例如通过 reflect.metadata 使用反射元数据。
以上就是TypeScript 中的装饰器的详细内容，更多请关注php中文网其它相关文章！