// 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();
Typescript注解
最新推荐文章于 2024-08-10 17:25:51 发布