HarmonyOS的@State装饰器的底层实现

序言

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，进一步通过规范强化静态检查和分析，使得在程序运行之前的开发期能检测更多错误，提升代码健壮性，并实现更好的运行性能。同时，提供了声明式UI范式、状态管理支持等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。

准备工作

首先创建一个HTML文件，然后安装typeScript

npm i typescript -g

创建一个ts文件并在HTML文件中引入同名的js文件（这个js文件随后会通过自动编译生成），通过下面的命令创建typeScript的配置文件tsconfig.josn

tsc --init

如图：

自动化编译

1. ts默认编译的js版本是S7，我们可以手动在tsconfig.josn中将其改为ES6
   

2. 监视目录中.ts文件变化

tsc --watch

3. 优化：当编译出错时不生成.js文件

tsc --noEmitOnError --watch

打开装饰器支持

实现@State装饰器

// 定义一个装饰器函数State，用于给类的属性添加getter和setter
function State(target: object, propertyKey: string) {
    // 定义一个私有属性，用于存储实际的属性值
    let key = `__${propertyKey}`;
    // 使用Object.defineProperty来定义属性的描述符
    Object.defineProperty(target, propertyKey, {
        // getter函数，返回私有属性的值
        get() {
            return this[key];
        },
        // setter函数，设置私有属性的值，并打印属性的新值
        set(newVal: string) {
            console.log(`${propertyKey}的最新值为：${newVal}`);
            this[key] = newVal;
        },
        // 属性是可枚举的
        enumerable: true,
        // 属性描述符是可配置的
        configurable: true,
    });
}

// 定义一个Person类，包含name和age属性
class Person {
    name: string;
    // 使用State装饰器装饰age属性
    @State age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

// 创建两个Person实例
const p1 = new Person('张三', 18);
const p2 = new Person('李四', 28);

// 修改p1的age属性，会触发State装饰器中的setter函数
p1.age = 30;
// 修改p2的age属性，同样会触发State装饰器中的setter函数
p2.age = 40;

// 打印p1对象，展示其属性值
console.log(p1);