Typescript注解

// test-descriptor.ts
/**
 * 1.注解(装饰器)是一类特殊类型的声明，可以用在类、方法、构造器、属性和参数上。
 * 2.其实本质上，定义一个注解，就是定义一个TypeScript方法，只是该方法必须符合官方的规范。
 * 3.方法分别返回符合规范的函数闭包，参数target、propertyKey、descriptor。经测试，这三个参数中target和propertyKey是必须的，没有的话编译过不去，descriptor可以省略
 **/

function validateK(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    // console.log('changeName befor')
    // console.log(`target:${JSON.stringify(target)}, propertyKey:${propertyKey}, descriptor: ${descriptor.value}`);
    let saveRun = descriptor.value; // 保存原来函数
    descriptor.value = function () {
        // console.log('changeName 装饰器重写');
    }
    descriptor.value(); // 执行重写函数
    saveRun(); // 执行原保存changeName方法
    // console.log('changeName after');
}

class UserKK {
    // 调用装饰器
    @validateK
    changeName() {
        console.log('changeName')
    }
}


function Zynhello() {
    console.log("Zynworld(): 加载.");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("Zynworld(): 执行.");
    }
}

function Zynworld() {
    console.log("Zynworld(): 加载.");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("Zynworld(): 执行.");
    }
}

class Main {

    @Zynhello()
    @Zynworld()
    method() {
        console.log('method(): 执行.');
    }
}

// 上述输出结果如下



/**
 * @title 类注解
 * @dec 类注解应用于类的构造函数，可以使用它去观察、修改或替换类的定义
 **/
// 下面方法拆解
/*
function classDecoratorQ<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        message = 'Decorator';
    }
}
*/
interface Constructor { // 定义一个接口
    new(...args: any[]): {} // 创建一个函数 参数数组类型
}
// T(泛型)继承接口 Constructor
/**
 * @link https://www.tslang.cn/docs/release-notes/typescript-2.2.html
 * @template T 泛型变量
 * @param {T} constructor // 传入PersonLP的构造函数
 * @returns 
 */
function classDecoratorQ<T extends Constructor>(constructor: T) {
    return class extends constructor {
        message = 'Decorator';
    }
}


@classDecoratorQ
class PersonLP {

    message: string;

    constructor(message: string) {
        this.message = message;
    }

    greet() {
        console.log(`Hello ${this.message} !`);
    }
}

const person = new PersonLP('World');
person.greet();

// print: Hello Decorator(覆盖掉了原来的构造函数。)


// 属性装饰器
function enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value; // 将函数 greet 的变成不可枚举的 
    };
}

class ZYN {
    message: string;

    constructor(message: string) {
        this.message = message;
    }

    @enumerable(false)
    greet() {
        console.log(`Hello ${this.message} !`);
    }
}
const zyn = new ZYN('World');
for (const property in zyn) {
    console.log(property);
}
zyn.greet();