TypeScript @Decorator: Потужна магічна паличка! 🪄 - javascript.org.ua

Що таке @Decorator ⚡

Декоратор — це спеціальна функція в TypeScript, яка використовується для модифікації класів, методів, властивостей або параметрів. Простими словами, це своєрідна "магічна паличка", яка додає додаткову потужність нашому коду! 🔮✨

🎭 Чому використовувати декоратори?

Зменшує повторення коду 🛑
Дозволяє писати чистий та зрозумілий код 📝
Полегшує впровадження логіки ⚡
Допомагає додавати метадані 📌

🛠️ Як це працює? Для створення функції декоратора в TypeScript використовується символ @. Це фактично функція, яка може змінювати або розширювати цільовий елемент.

🔥 Простий приклад:

function Logger(constructor: Function) {  
 console.log(`Class Created: ${constructor.name}`);  
}  

@Logger  
class Person {  
 constructor() {  
 console.log("Person instance created!");  
 }  
}

✅ Тут @Logger працює як декоратор на класі Person. Кожного разу, коли клас Person буде ініціалізований, у консолі з'явиться лог.

💡 Типи декораторів

В TypeScript є п’ять типів декораторів:

1️⃣ Декоратор класу — працює з усім класом 🏛️

2️⃣ Декоратор методу — працює з певним методом ⚙️

3️⃣ Декоратор властивості — обробляє властивості 🏠

4️⃣ Декоратор параметра — впливає на параметри функції 🎯

5️⃣ Декоратор доступу — використовується для геттерів/сеттерів 🛠️

🎬 Приклад з реального життя:

Логування запитів до API. Припустимо, ми хочемо реєструвати кожен виклик API. Як це зробити? За допомогою декораторів! 😎

function LogRequest(target: any, methodName: string, descriptor: PropertyDescriptor) {  
 const originalMethod = descriptor.value;  
 descriptor.value = function(...args: any[]) {  
 console.log(`API Request Made: ${methodName}`);  
 return originalMethod.apply(this, args);  
 };  
}  
class APIService {  
 @LogRequest  
 fetchData() {  
 console.log("Fetching data from server...");  
 }  
}  
const api = new APIService();  
api.fetchData();

✅ Тут метод fetchData автоматично буде реєструватися кожного разу, коли його викликають! 🎉 🚀

Використання декораторів в NestJS:

NestJS — це фреймворк на основі TypeScript, де використання декораторів є досить поширеним. 📌 Використання декораторів @GET і @POST в NestJS:

import { Controller, Get, Post, Body } from '@nestjs/common';  
@Controller('users')  
export class UserController {  
 @Get()  
 getAllUsers() {  
 return ['User 1', 'User 2', 'User 3'];  
 }  
 @Post()  
 createUser(@Body() userData: { name: string }) {  
 return `User ${userData.name} created successfully!`;  
 }  
}

✅ Тут ми створили HTTP API, використовуючи декоратори @Get() і @Post(), які є чистими та простими.

🚀 Розширені декоратори:

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

function AddMetadata(role: string) {  
 return function (target: any, key: string) {  
 Reflect.defineMetadata("role", role, target, key);  
 };  
}  

class User {  
 @AddMetadata("admin")  
 getUserInfo() {  
 return "User Info";  
 }  
}

✅ Тут ми додали метадані до методу getUserInfo! 🏷️

🎯 Заключні думки:

Декоратори TypeScript — це можливість зробити наш код більш динамічним, чистим та розумним. Вони потужні в розробці JavaScript і широко використовуються в основних фреймворках, таких як Angular, NestJS тощо. Як вам така магічна паличка? 😍

Чи будете ви використовувати декоратори у своєму наступному проекті? 🚀
NB: створено за допомогою ChatGPT ❤️

Перекладено з: TypeScript @Decorator: A Powerful Magic Wand! 🪄