Что такое макросы в Angular?

Макросы — это инструменты, которые позволяют автоматизировать задачи, упрощая написание кода за счет их повторного использования. В JavaScript, включая использование с Angular, макросами обычно называют функции или конструкции, которые позволяют создавать более сложные инструкции с меньшими усилиями. Хотя в JavaScript нет прямого понятия «макрос», аналогичные принципы можно реализовать с помощью функций, объявлений и шаблонных литералов.

Примеры макросов

В JavaScript мы можем использовать функции для упрощения или кодирования часто повторяющихся задач. Ниже приведены примеры, как вы можете использовать функции в Angular для создания своего рода «макросов».

Пример 1: Функция для форматирования строк

Допустим, у вас есть необходимость форматировать строки в определенном стиле на протяжении всего приложения:

// utils.ts
export function formatString(input: string): string {
    return input.trim().charAt(0).toUpperCase() + input.slice(1).toLowerCase();
}

Использование этой функции в вашем компоненте:

import { Component } from '@angular/core';
import { formatString } from './utils';

@Component({
  selector: 'app-my-component',
  template: `<p>{{ formattedName }}</p>`
})
export class MyComponent {
  name = 'john doe';
  formattedName = formatString(this.name);
}

Пример 2: Декораторы как макросы

В Angular вы можете использовать декораторы для расширения функциональности классов. Это тоже можно рассматривать как своего рода макрос.

import { Component } from '@angular/core';

export function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`Calling "${propertyName}" with`, args);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

@Component({
  selector: 'app-log-example',
  template: `<button (click)="execute()">Click me</button>`
})
export class LogExampleComponent {
  @Log
  execute() {
      console.log('Executed!');
  }
}

В этом примере мы создали декоратор Log, который записывает в консоль аргументы, с которыми был вызван метод.

Заключение

Хотя в JavaScript и Angular нет традиционных «макросов» как в некоторых других языках, вы можете создать функционал, схожий с ними, с помощью функций и декораторов. Это позволяет уменьшить количество повторяющегося кода и сделать его более чистым и поддерживаемым. Также помните, что хорошо структурированные функции и классы облегчают работу, делают код более читаемым и упрощают его тестирование.