TS 从 0 到 1 - 装饰器

Cellinlab

发布于 2023-05-17 19:53:51

1480

发布于 2023-05-17 19:53:51

文章被收录于专栏：Cellinlab's Blog Cellinlab's BlogCellinlab's Blog

# 装饰器

装饰器是一个表达式，表达式被执行后返回一个函数，函数的入参为 target、name、descriptor。执行函数后，可能返回 descriptor 对象，用于配置 target 对象。

# 装饰器分类

类装饰器
属性装饰器
方法装饰器
参数装饰器

# 类装饰器

类装饰器声明：

declare type ClassDecorator = <TFunction extends Function>(
  target: TFunction
) => TFunction | void;

类装饰器用于装饰类：

function Greeter(target: Function): void {
  target.prototype.greet = function (): void {
    console.log("Hello, Cell!");
  };
}

@Greeter
class Greeting {
  constructor() {}
}

const greeting = new Greeting();
(greeting as any).greet(); // Hello, Cell!

带参数的类装饰器：

function Greeter(greeting: string) {
  return function (target: Function) {
    target.prototype.greet = function (): void {
      console.log(greeting);
    };
  };
}

@Greeter("Hello, Cell!")
class Greeting {
  constructor() {}
}

const greeting = new Greeting();
(greeting as any).greet(); // Hello, Cell!

# 属性装饰器

属性装饰器声明：

declare type PropertyDecorator = (
  target: Object,
  propertyKey: string | symbol
) => void;

属性装饰器用于装饰类的属性，接收两个参数：

target: Object：被装饰的类
propertyKey: string | symbol：被装饰类的属性名

function logProperty(target: any, key: string) {
  delete target[key];

  const backingField = "_" + key;

  Object.defineProperty(target, backingField, {
    writable: true,
    enumerable: true,
    configurable: true,
  });

  // property getter
  const getter = function (this: any) {
    const currVal = this[backingField];
    console.log(`Get: ${key} => ${currVal}`);
    return currVal;
  };

  // property setter
  const setter = function (this: any, newVal: any) {
    console.log(`Set: ${key} => ${newVal}`);
    this[backingField] = newVal;
  };

  // Create new property with getter and setter
  Object.defineProperty(target, key, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class Person {
  @logProperty
  public name: string;

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

const person = new Person("Cell");
person.name = "Cellinlab"; // Set: name => Cellinlab
console.log(person.name); // Get: name => Cellinlab
// Cellinlab

# 方法装饰器

方法装饰器声明：

declare type MethodDecorator = <T>(
  target: Object,
  propertyKey: string | symbol,
  descriptor: TypePropertyDescript<T>
) => TypedPropertyDescriptor<T> | void;

方法装饰器用于装饰类的方法，接收三个参数：

target: Object：被装饰的类
propertyKey: string | symbol：被装饰类的方法名
descriptor: TypedPropertyDescriptor<T>：属性描述符

function log(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  let originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log("wrapped function: before invoking " + propertyKey);
    let result = originalMethod.apply(this, args);
    console.log("wrapped function: after invoking " + propertyKey);
    return result;
  };
}

class Task {
  @log
  runTask(arg: any): any {
    console.log("running task with " + arg);
    return "finished";
  }
}

let task = new Task();
let result = task.runTask("Cell"); 
// wrapped function: before invoking runTask
// running task with Cell
// wrapped function: after invoking runTask
console.log(result); // finished

# 参数装饰器

参数装饰器声明：

declare type ParameterDecorator = (
  target: Object,
  propertyKey: string | symbol,
  parameterIndex: number
) => void;

用于装饰函数参数，接收三个参数：

target: Object：被装饰的类
propertyKey: string | symbol：方法名
parameterIndex: number：方法中参数的索引值

function Log(target: Function, key: string, parameterIndex: number) {
  let functionLogged = key || target.prototype.constructor.name;
  console.log(
    `The parameter in position ${parameterIndex} at ${functionLogged} has been decorated`
  );
}

class Greeter {
  greeting: string;
  constructor(@Log phrase: string) {
    this.greeting = phrase;
  }
}
// The parameter in position 0 at Greeter has been decorated

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022/5/8，如有侵权请联系 cloudcommunity@tencent.com 删除

function