Angular में TypeScript डेकोरेटर के साथ कैसे काम करें

टाइपस्क्रिप्ट डेकोरेटर एक विशेष प्रकार की घोषणा है जिसे किसी क्लास, विधि, एक्सेसर, प्रॉपर्टी या पैरामीटर से जोड़ा जा सकता है। Angular में, डेकोरेटर क्लास में मेटाडेटा जोड़ने का एक तरीका प्रदान करते हैं, जिससे वे पुन: प्रयोज्य घटक, सेवाएँ और बहुत कुछ बनाने के लिए अत्यधिक शक्तिशाली बन जाते हैं। यह गाइड बताता है कि Angular में टाइपस्क्रिप्ट डेकोरेटर के साथ कैसे काम किया जाए, उनके उपयोग को बेहतर ढंग से समझने में मदद करने के लिए उदाहरण प्रदान करता है।

टाइपस्क्रिप्ट डेकोरेटर क्या हैं?

डेकोरेटर ऐसे फ़ंक्शन होते हैं जो किसी क्लास या क्लास के सदस्य के व्यवहार को संशोधित करते हैं। Angular में, डेकोरेटर का उपयोग घटकों, निर्देशों, पाइपों और इंजेक्टेबल सेवाओं को परिभाषित करने के लिए किया जाता है। वे किसी क्लास में मेटाडेटा लागू करने का एक घोषणात्मक तरीका प्रदान करते हैं, जिसका उपयोग Angular विभिन्न उद्देश्यों के लिए करता है, जैसे कि घटकों के उदाहरण बनाना या निर्भरता को इंजेक्ट करना।

सामान्य कोणीय सज्जाकार

Angular में कई बिल्ट-इन डेकोरेटर हैं जिनका उपयोग अलग-अलग उद्देश्यों के लिए किया जाता है। नीचे सबसे आम Angular डेकोरेटर दिए गए हैं:

• @Component - एक Angular घटक को परिभाषित करता है।
• @Directive - एक Angular निर्देश को परिभाषित करता है।
• @Pipe - एक Angular पाइप को परिभाषित करता है।
• @Injectable - एक सेवा को परिभाषित करता है जिसे अन्य घटकों या सेवाओं में इंजेक्ट किया जा सकता है।
• @Input - किसी गुण को डेटा-बाइंडिंग इनपुट बनाने के लिए उसे सजाता है।
• @Output - किसी गुण को सजाकर उसे इवेंट-बाइंडिंग आउटपुट बनाता है।

@Component डेकोरेटर का उपयोग करना

@Component डेकोरेटर का उपयोग Angular कॉम्पोनेंट को परिभाषित करने के लिए किया जाता है। यह कॉम्पोनेंट के बारे में मेटाडेटा प्रदान करता है, जैसे कि उसका चयनकर्ता, टेम्प्लेट, शैलियाँ और अन्य कॉन्फ़िगरेशन।

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

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

इस उदाहरण में, @Component डेकोरेटर एक सरल घटक को परिभाषित करता है जिसमें "Hello, World!" प्रदर्शित करने वाला टेम्पलेट होता है। selector इस घटक के लिए उपयोग किए जाने वाले कस्टम HTML टैग को निर्दिष्ट करता है।

@Injectable डेकोरेटर का उपयोग करना

@Injectable डेकोरेटर का उपयोग एक सर्विस क्लास को परिभाषित करने के लिए किया जाता है जिसे अन्य घटकों या सेवाओं में इंजेक्ट किया जा सकता है। यह Angular की निर्भरता इंजेक्शन प्रणाली का एक अनिवार्य हिस्सा है।

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

यहां, @Injectable डेकोरेटर पूरे अनुप्रयोग में निर्भरता इंजेक्शन के लिए DataService को उपलब्ध कराता है।

@Input और @Output डेकोरेटर का उपयोग करना

@Input और @Output डेकोरेटर का उपयोग Angular कॉम्पोनेंट में इनपुट प्रॉपर्टी और आउटपुट इवेंट बनाने के लिए किया जाता है। इनका उपयोग आमतौर पर कॉम्पोनेंट संचार के लिए किया जाता है।

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

इस उदाहरण में, @Input डेकोरेटर का उपयोग पैरेंट कॉम्पोनेंट से चाइल्ड कॉम्पोनेंट तक डेटा पास करने के लिए किया जाता है। @Output डेकोरेटर का उपयोग चाइल्ड कॉम्पोनेंट से डेटा को इवेंट के माध्यम से पैरेंट कॉम्पोनेंट तक वापस भेजने के लिए किया जाता है।

कस्टम डेकोरेटर बनाना

क्लास, मेथड या प्रॉपर्टी में विशिष्ट व्यवहार या मेटाडेटा जोड़ने के लिए Angular में कस्टम डेकोरेटर बनाए जा सकते हैं। नीचे एक सरल क्लास डेकोरेटर का उदाहरण दिया गया है:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

यहाँ, LogClass फ़ंक्शन एक कस्टम डेकोरेटर है जो क्लास को परिभाषित होने पर कंसोल में लॉग करता है। @LogClass को MyService पर लागू करने से इसके निर्माण के दौरान संदेश लॉग होते हैं।

निष्कर्ष

Angular में डेकोरेटर क्लास, मेथड, प्रॉपर्टी और पैरामीटर में मेटाडेटा और व्यवहार जोड़ने का एक शक्तिशाली तरीका प्रदान करते हैं। @Component, @Injectable, @Input, और @Output जैसे बिल्ट-इन डेकोरेटर का उपयोग कैसे करें, यह समझना Angular के प्रभावी विकास के लिए आवश्यक है। इसके अतिरिक्त, किसी एप्लिकेशन में विशिष्ट आवश्यकताओं को पूरा करने के लिए कस्टम डेकोरेटर बनाए जा सकते हैं, जिससे विकास प्रक्रिया में लचीलापन आता है।