Что такое декораторы полей класса в Angular?

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

Основные концепции

Декораторы в TypeScript — это функции, которые могут добавлять метаданные или изменять поведение элементов класса (например, свойства и методы). В случае полевых декораторов, они применяются к свойствам класса.

Пример использования декораторов

Предположим, вам нужно создать простой класс с поле, которое должно быть наблюдаемым. Мы можем использовать @observable декоратор (как пример, аналогичные функции могут быть реализованы самостоятельно).

import { observable } from "mobx";

class User {
  @observable
  name: string;

  @observable
  age: number;

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

В данном примере мы используем декоратор @observable, который делает свойства name и age наблюдаемыми для MobX (библиотека для управления состоянием). Это означает, что когда значения этих полей изменяются, компоненты, которые используют эти значения, будут автоматически обновлены.

Написание собственного декоратора поля

Теперь давайте рассмотрим, как можно написать собственный декоратор, который будет логировать изменение поля.

function Log(target: any, propertyKey: string) {
  let value: any;

  const getter = () => {
    console.log(`Get: ${propertyKey} => ${value}`);
    return value;
  };

  const setter = (newValue: any) => {
    console.log(`Set: ${propertyKey} => ${newValue}`);
    value = newValue;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
  });
}

class Person {
  @Log
  name: string;

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

const person = new Person("Alice");
console.log(person.name); // Лог: Get: name => Alice
person.name = "Bob"; // Лог: Set: name => Bob
console.log(person.name); // Лог: Get: name => Bob

В этом примере мы создали декоратор @Log, который оборачивает доступ к свойству name. Каждый раз, когда мы получаем или устанавливаем значение этого свойства, в консоль выводится информация о том, что именно произошло.

Заключение

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