Декораторы можно присоединять к объявлению класса, методу, методу доступа, свойству или параметру.

Для создания декоратора используется синтаксис «@expression», где expression — это функция, которая вызывается во время выполнения с информацией о декорированном объявлении.

Конфигурации

Декоратор TypeScript по умолчанию отключен. Чтобы включить экспериментальную поддержку декораторов, вы должны включить параметр компилятора experimentalDecorators либо в командной строке, либо в вашем tsconfig.json:

Командная строка:

tsc --target ES5 --experimentalDecorators

tsconfig.json:

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

ПРИМЕЧАНИЕ. Декораторы — это экспериментальная функция, которая может измениться в будущих версиях.

Чтобы создать собственный декоратор, вам нужно написать фабрику декораторов — это простая функция, которая возвращает другую функцию (выражение), которая будет вызываться декоратором во время выполнения. .

function color(value: string) {
  // this is the decorator factory, it sets up
  // the returned decorator function
  return function (target) {
    // this is the decorator
    // do something with 'target' and 'value'...
  };
}

В TypeScript есть четыре типа декораторов:

  1. Декораторы класса: применяются к объявлению класса и могут изменять или заменять конструктор класса.
  2. Декораторы свойств: применяются к объявлению свойства внутри класса и могут изменять поведение свойства.
  3. Декораторы методов: применяются к объявлению метода внутри класса и могут изменять поведение метода.
  4. Декораторы параметров: применяются к объявлению параметра в функции или методе и могут изменять поведение параметра.

Эти четыре типа декораторов обеспечивают гибкий и мощный способ изменения поведения классов, свойств, методов и параметров в TypeScript. Применяя декораторы, разработчики могут добавлять в свой код новые функции, такие как проверка, ведение журнала и кэширование, без необходимости изменять исходный код.

Декораторы класса

Декоратор класса может изменять поведение объявления класса различными способами. Он может добавлять в класс новые свойства или методы, изменять существующие свойства или методы или полностью заменять объявление класса новым.

function addProperty(target: any) {
  target.newProperty = "This is a new property!";
}

@addProperty
class MyClass {
  constructor() {}
}

console.log(MyClass.newProperty); // "This is a new property!"

В этом примере функция декоратора addProperty применяется к классу MyClass. Когда код выполняется, функция addProperty вызывается с функцией-конструктором MyClass в качестве цели. Затем функция addProperty добавляет новое свойство в функцию-конструктор MyClass.

Декораторы класса также можно использовать для изменения существующих свойств или методов класса или для полной замены объявления класса новым. Это делает декораторы классов мощной функцией TypeScript, которую можно использовать для реализации широкого спектра функций.

Декораторы методов

Декоратор метода может изменять поведение объявления метода различными способами. Он может добавлять к методу дополнительную функциональность, изменять аргументы метода или возвращаемое значение или полностью заменять метод новой реализацией.

Вот пример декоратора метода, который регистрирует информацию о вызове метода:

function logMethod(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    console.log(`Method ${key} is called with arguments ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
}

class MyClass {
  @logMethod
  myMethod(arg1: string, arg2: number) {
    console.log(`myMethod(${arg1}, ${arg2}) is called.`);
  }
}

const obj = new MyClass();
obj.myMethod("hello", 42);

В этом примере функция декоратора logMethod применяется к методу myMethod класса MyClass. При выполнении кода вызывается функция logMethod с информацией об объявлении метода, включая целевой объект (MyClass.prototype), имя метода ("myMethod") и объект-дескриптор, содержащий информацию о методе.

Функция logMethod изменяет поведение метода myMethod, дополняя исходную реализацию метода дополнительными функциями ведения журнала. Измененная реализация метода записывает в журнал информацию о вызове метода, включая имя метода и его аргументы, перед вызовом исходной реализации.

Декораторы методов можно использовать для реализации широкого спектра функций, включая проверку, кэширование, профилирование и многое другое. Они обеспечивают гибкий и многоразовый способ изменения поведения отдельных методов внутри класса.

Аксессуар Декораторы

Декоратор доступа может изменять поведение метода получения или установки различными способами. Он может добавлять к методу дополнительную функциональность, изменять аргументы метода или возвращаемое значение или полностью заменять метод новой реализацией.

function logAccess(target: any, key: string, descriptor: PropertyDescriptor) {
  const getter = descriptor.get;
  const setter = descriptor.set;

  if (getter) {
    descriptor.get = function() {
      console.log(`Getting property ${key}`);
      return getter.call(this);
    };
  }

  if (setter) {
    descriptor.set = function(value: any) {
      console.log(`Setting property ${key} to ${value}`);
      setter.call(this, value);
    };
  }

  return descriptor;
}

class MyClass {
  private _myProperty: string = "";

  @logAccess
  get myProperty() {
    return this._myProperty;
  }

  @logAccess
  set myProperty(value: string) {
    this._myProperty = value;
  }
}

const obj = new MyClass();
obj.myProperty = "hello";
console.log(obj.myProperty);

В этом примере функция декоратора logAccess применяется к методам получения и установки myProperty класса MyClass. При выполнении кода вызывается функция logAccess с информацией об объявлении средства доступа, включая целевой объект (MyClass.prototype), имя средства доступа ("myProperty") и объект-дескриптор, содержащий информацию о средстве доступа.

Функция logAccess изменяет поведение методов получения и установки, дополняя исходные реализации дополнительными функциями ведения журнала. Измененные реализации регистрируют информацию о доступе к свойствам перед вызовом исходных реализаций.

Декораторы доступа можно использовать для реализации широкого спектра функций, включая проверку, кэширование и многое другое. Они обеспечивают гибкий и многоразовый способ изменения поведения отдельных методов доступа внутри класса.

Декораторы недвижимости

Декоратор свойства может изменять поведение свойства различными способами. Он может добавить к свойству дополнительную функциональность, изменить тип или видимость свойства или полностью заменить свойство новой реализацией.

Вот пример декоратора свойств, который добавляет новое свойство в класс:

function addProperty(target: any, key: string) {
  Object.defineProperty(target, key + "_new", {
    value: "This is a new property!",
    enumerable: false,
    configurable: true
  });
}

class MyClass {
  @addProperty
  myProperty: string = "hello";
}

const obj = new MyClass();
console.log(obj["myProperty_new"]); // "This is a new property!"

В этом примере функция декоратора addProperty применяется к свойству myProperty класса MyClass. При выполнении кода вызывается функция addProperty с информацией об объявлении свойства, включая целевой объект (MyClass.prototype) и имя свойства ("myProperty").

Функция addProperty изменяет поведение свойства, добавляя новое свойство к объекту-прототипу класса с помощью метода Object.defineProperty. Новое свойство именуется путем добавления «_new» к исходному имени свойства и имеет фиксированное значение «Это новое свойство!».

Декораторы свойств можно использовать для реализации широкого спектра функций, включая проверку, кэширование и многое другое. Они обеспечивают гибкий и многоразовый способ изменения поведения отдельных свойств внутри класса.

Декораторы параметров

Декоратор параметров может изменить поведение функции или метода, добавив дополнительные метаданные в сигнатуру функции. Он может изменить тип параметра или значение по умолчанию, а также добавить дополнительную информацию о параметре, которую можно использовать во время выполнения.

Вот пример декоратора параметров, который регистрирует информацию о вызове функции:

function logParameter(target: any, methodName: string, parameterIndex: number) {
  console.log(`Logging parameter ${parameterIndex} of ${methodName}`);
}

class MyClass {
  myMethod(@logParameter arg1: string, @logParameter arg2: number) {
    console.log(`arg1: ${arg1}, arg2: ${arg2}`);
  }
}

const obj = new MyClass();
obj.myMethod("hello", 123);

В этом примере функция декоратора logParameter применяется к каждому параметру метода myMethod класса MyClass. При выполнении кода вызывается функция logParameter с информацией об объявлении параметра, включая целевой объект (MyClass.prototype), имя метода ("myMethod") и индекс параметра (0 или 1).

Функция logParameter записывает информацию о параметре в консоль, которую можно использовать для отладки или отслеживания. В этом случае функция регистрирует индекс параметра и имя метода.

Декораторы параметров можно использовать для реализации широкого спектра функций, включая проверку, ведение журнала и многое другое. Они обеспечивают гибкий и многоразовый способ изменения поведения отдельных параметров внутри функции или метода.

Спасибо за прочтение — надеюсь, эта статья оказалась для вас полезной. Удачного кодирования! :)

источник: https://www.typescriptlang.org/docs/handbook/decorators.html