Введение в декораторы

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

Их часто используют в таких фреймворках, как Angular, чтобы упростить разработку.

Как работают декораторы

Декоратор — это функция, применяемая к классу или его членам (методам, свойствам и т. д.).

Например, @Component в Angular — это декоратор, который добавляет метаданные к классу, определяя его как компонент.

Использование встроенных декораторов

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

• @readonly: делает свойство доступным только для чтения.
• @enumerable: управляет тем, доступно ли свойство для перечисления.

Эти декораторы помогают напрямую изменять поведение свойств или методов.

Создание простого декоратора

Вы можете создать собственный декоратор для ведения журнала сообщений или добавления функциональности:

Примените его к свойству: @Log.

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

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

Декораторы классов используются для изменения или расширения поведения всего класса:

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

Примените его к классу: @SimpleDecorator.

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

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

Декораторы методов изменяют поведение метода класса:

Используйте его для метода: @LogMethod.

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

Использование декораторов в Angular

Angular активно использует декораторы для добавления метаданных к своим компонентам:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

Декоратор @Component определяет класс как компонент Angular.

Рекомендации по использованию декораторов

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

• Делайте их простыми и предназначенными для конкретной задачи.
• Используйте их для метаданных, а не для сложной логики.
• По возможности применяйте встроенные декораторы, чтобы сэкономить время.

Поздравляем!

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