配置装饰器

• 装饰器（Decorator）在TypeScript是非常常用的，它可以使得程序变得更加美好。许多库都基于装饰器构建的，如Angular、Nestjs等。
• HarmonyOS应用UI开发中定义了很多装饰器。
• 装饰器在本质上是一种特殊的函数，可以被应用在类、类属性、类方法、类访问器、类方法的参数上，从而改变原有的功能。装饰器很像是组合一系列函数，通过它可以轻松实现代理模式来使代码更简洁。
• 启用装饰器，可以通过命令行参数或在tsconfig.json中启用实验性装饰器编译器选项，命令行参数方式如下：

tsc --target ES6 --experimentalDecorators

• 对于配置文件tsconfig.json，启用装饰器配置如下:

{
    "compilerOptions": {
        "target": "ES6",
        "experimentalDecorators": true
    }
}

使用装饰器

• 使用的装饰器用@符号，这样装饰器就会被应用到对应的目标上。

function test( target:Object ) {    //一个函数
    console.log("This is test")
}
@test                //在类A上使用装饰器
class A {}

• 如果一个函数返回一个回调函数，在这个函数作为装饰器来使用时，那么这个函数就是装饰器工厂，例如：

function test() {
    console.log('test out');
    return (target) => { console.log('test in') }
}

@test()
class A{ }
/*输出：
test out
test in
*/

• 上方代码的含义为给A这个类绑定了一个装饰器工厂，在绑定的时候由于在函数后面写上了()，所以会先执行装饰器工厂拿到真正的装饰器，真正的装饰器会在定义类之前执行，所以会接着执行里面函数。
• 装饰器只在解释执行时会执行一次
• 装饰器可以组合，组合使用的装饰器会从上至下的依次执行所有的装饰器工厂，拿到所有真正的装饰器后，再从下至上的执行所有的装饰器。例如：

function t1(target) {
    console.log('t1')
}
function t2(target) {
    console.log('t2')
}
function f1() {
    console.log('f1 out')
    return (target) => { console.log('f1 in') }
}
function f2() {
    console.log('f2 out')
    return function () { console.log('f2 in') }
}
@t1
@f1()
@f2()
@t2
class A { }
/*输出
f1 out
f2 out
t2
f2 in
f1 in
t1
*/

• 装饰器按照其应用的目标可以分为5种
  • 类装饰器、属性装饰器、方法装饰器、访问器装饰器、参数装饰器。

演示代码如下：

@classDecorator                     // 类装饰器
class Car {
    @propertyDecorator           // 属性装饰器
    name: string;
    @methodDecorator            // 方法装饰器
    accelerate(
        @parameterDecorator    // 参数装饰器
        num: number
    ) {}
    @accessorDecorator        // 访问器装饰器
    get speed() {}
}

关于装饰器更多阐述可以参阅官方网络链接：

https://www.typescriptlang.org/docs/handbook/decorators.html

• 通过装饰器可以改变现已定义的行为。
• 装饰器的使用场景包括：
  • 项前或项后回调、监听属性变化、监听方法调用、对方法参数进行转换、添加新方法、添加新属性、运行时类型检查、自动编解码、依赖注入等。
• 通过装饰器可以简化编码，在HarmonyOS中基于ArkTS的开发中使用了很多定义的装饰器。