जावास्क्रिप्ट डेकोरेटर्स प्रस्ताव: मेथड एन्हांसमेंट और मेटाडेटा एनोटेशन

जावास्क्रिप्ट, एक गतिशील और विकसित होने वाली भाषा के रूप में, कोड की पठनीयता, रखरखाव और विस्तारशीलता में सुधार के तरीकों की लगातार तलाश करती है। इन पहलुओं को संबोधित करने के उद्देश्य से सबसे प्रत्याशित सुविधाओं में से एक डेकोरेटर्स प्रस्ताव है। यह लेख जावास्क्रिप्ट डेकोरेटर्स का एक व्यापक अवलोकन प्रदान करता है, जिसमें उनके सिंटैक्स, क्षमताओं और आधुनिक जावास्क्रिप्ट विकास पर संभावित प्रभाव की पड़ताल की गई है। हालांकि वर्तमान में यह एक स्टेज 3 प्रस्ताव है, डेकोरेटर्स पहले से ही एंगुलर जैसे फ्रेमवर्क में व्यापक रूप से उपयोग किए जाते हैं और बेबेल जैसे ट्रांसपाइलर्स के माध्यम से तेजी से अपनाए जा रहे हैं। यह उन्हें समझना किसी भी आधुनिक जावास्क्रिप्ट डेवलपर के लिए महत्वपूर्ण बनाता है।

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

डेकोरेटर्स एक डिज़ाइन पैटर्न है जो पाइथन और जावा जैसी अन्य भाषाओं से लिया गया है। संक्षेप में, वे एक विशेष प्रकार की घोषणा हैं जिसे क्लास, मेथड, एक्सेसर, प्रॉपर्टी या पैरामीटर से जोड़ा जा सकता है। डेकोरेटर्स @expression सिंटैक्स का उपयोग करते हैं, जहाँ expression का मूल्यांकन एक ऐसे फ़ंक्शन के रूप में होना चाहिए जिसे रनटाइम पर डेकोरेट की गई घोषणा के बारे में जानकारी के साथ कॉल किया जाएगा।

डेकोरेटर्स को मौजूदा कोड में सीधे संशोधन किए बिना अतिरिक्त कार्यक्षमता या मेटाडेटा जोड़ने के एक तरीके के रूप में सोचें। यह एक अधिक घोषणात्मक और रखरखाव योग्य कोडबेस को बढ़ावा देता है।

बुनियादी सिंटैक्स और उपयोग

एक साधारण डेकोरेटर एक फ़ंक्शन है जो एक, दो, या तीन तर्क लेता है, यह इस बात पर निर्भर करता है कि यह किसे डेकोरेट कर रहा है:

• क्लास डेकोरेटर के लिए, तर्क क्लास का कंस्ट्रक्टर होता है।
• मेथड या एक्सेसर डेकोरेटर के लिए, तर्क टारगेट ऑब्जेक्ट (या तो क्लास प्रोटोटाइप या स्टैटिक सदस्यों के लिए क्लास कंस्ट्रक्टर), प्रॉपर्टी कुंजी (मेथड या एक्सेसर का नाम), और प्रॉपर्टी डिस्क्रिप्टर होते हैं।
• प्रॉपर्टी डेकोरेटर के लिए, तर्क टारगेट ऑब्जेक्ट और प्रॉपर्टी कुंजी होते हैं।
• पैरामीटर डेकोरेटर के लिए, तर्क टारगेट ऑब्जेक्ट, प्रॉपर्टी कुंजी, और फ़ंक्शन की पैरामीटर सूची में पैरामीटर का सूचकांक होते हैं।

क्लास डेकोरेटर्स

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

उदाहरण: क्लास इंस्टेंसिएशन लॉग करना

            function logClass(constructor: Function) {
 return class extends constructor {
 constructor(...args: any[]) {
 super(...args);
 console.log(`New instance of ${constructor.name} created.`);
 }
 };
}

@logClass
class MyClass {
 constructor(public message: string) {
 }
}

const instance = new MyClass("Hello, Decorators!"); // Output: New instance of MyClass created.
            

              
                Copy
              
            
          

इस उदाहरण में, logClass डेकोरेटर MyClass कंस्ट्रक्टर को संशोधित करता है ताकि हर बार एक नया इंस्टेंस बनने पर एक संदेश लॉग हो।

मेथड डेकोरेटर्स

मेथड डेकोरेटर्स एक क्लास के भीतर मेथड्स पर लागू होते हैं। इनका उपयोग किसी मेथड के व्यवहार को देखने, संशोधित करने या बदलने के लिए किया जा सकता है। यह मेथड कॉल्स को लॉग करने, तर्कों को मान्य करने या कैशिंग को लागू करने जैसी चीजों के लिए उपयोगी है।

उदाहरण: मेथड कॉल्स लॉग करना

            function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 const originalMethod = descriptor.value;

 descriptor.value = function (...args: any[]) {
 console.log(`Calling method ${propertyKey} with arguments: ${JSON.stringify(args)}`);
 const result = originalMethod.apply(this, args);
 console.log(`Method ${propertyKey} returned: ${result}`);
 return result;
 };

 return descriptor;
}

class Calculator {
 @logMethod
 add(a: number, b: number): number {
 return a + b;
 }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Output: Calling method add with arguments: [5,3]
 // Output: Method add returned: 8
            

              
                Copy
              
            
          

logMethod डेकोरेटर add मेथड के तर्कों और वापसी मान को लॉग करता है।

एक्सेसर डेकोरेटर्स

एक्सेसर डेकोरेटर्स मेथड डेकोरेटर्स के समान होते हैं लेकिन गेटर या सेटर मेथड्स पर लागू होते हैं। इनका उपयोग गुणों तक पहुंच को नियंत्रित करने या सत्यापन तर्क जोड़ने के लिए किया जा सकता है।

उदाहरण: सेटर मानों को मान्य करना

            function validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 const originalSet = descriptor.set;

 descriptor.set = function (value: number) {
 if (value < 0) {
 throw new Error("Value must be non-negative.");
 }
 originalSet.call(this, value);
 };
}

class Temperature {
 private _celsius: number = 0;

 @validate
 set celsius(value: number) {
 this._celsius = value;
 }

 get celsius(): number {
 return this._celsius;
 }
}

const temperature = new Temperature();
temperature.celsius = 25; // OK
// temperature.celsius = -10; // Throws an error
            

              
                Copy
              
            
          

validate डेकोरेटर यह सुनिश्चित करता है कि celsius सेटर केवल गैर-नकारात्मक मान स्वीकार करता है।

प्रॉपर्टी डेकोरेटर्स

प्रॉपर्टी डेकोरेटर्स क्लास प्रॉपर्टीज पर लागू होते हैं। इनका उपयोग प्रॉपर्टी के बारे में मेटाडेटा परिभाषित करने या उसके व्यवहार को संशोधित करने के लिए किया जा सकता है।

उदाहरण: एक आवश्यक प्रॉपर्टी को परिभाषित करना

            function required(target: any, propertyKey: string) {
 let existingRequiredProperties: string[] = target.__requiredProperties__ || [];
 existingRequiredProperties.push(propertyKey);
 target.__requiredProperties__ = existingRequiredProperties;
}

class UserProfile {
 @required
 name: string;

 age: number;

 constructor(data: any) {
 this.name = data.name;
 this.age = data.age;

 const requiredProperties: string[] = (this.constructor as any).prototype.__requiredProperties__ || [];
 requiredProperties.forEach(property => {
 if (!this[property]) {
 throw new Error(`Missing required property: ${property}`);
 }
 });
 }
}

// const user = new UserProfile({}); // Throws an error: Missing required property: name
const user = new UserProfile({ name: "John Doe" }); // OK
            

              
                Copy
              
            
          

required डेकोरेटर name प्रॉपर्टी को आवश्यक के रूप में चिह्नित करता है। फिर कंस्ट्रक्टर जांचता है कि सभी आवश्यक प्रॉपर्टीज मौजूद हैं या नहीं।

पैरामीटर डेकोरेटर्स

पैरामीटर डेकोरेटर्स फ़ंक्शन पैरामीटर्स पर लागू होते हैं। इनका उपयोग पैरामीटर के बारे में मेटाडेटा जोड़ने या उसके व्यवहार को संशोधित करने के लिए किया जा सकता है। वे अन्य प्रकार के डेकोरेटर्स की तुलना में कम आम हैं।

उदाहरण: निर्भरताएँ इंजेक्ट करना

            import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
 return (target: any) => {
 Reflect.defineMetadata('injectable', true, target);
 };
};

const Inject = (token: any): ParameterDecorator => {
 return (target: any, propertyKey: string | symbol | undefined, parameterIndex: number) => {
 Reflect.defineMetadata('design:paramtypes', [token], target, propertyKey!)
 };
};

@Injectable()
class DatabaseService {
 connect() {
 console.log("Connecting to the database...");
 }
}

class UserService {
 private databaseService: DatabaseService;

 constructor(@Inject(DatabaseService) databaseService: DatabaseService) {
 this.databaseService = databaseService;
 }

 getUser(id: number) {
 this.databaseService.connect();
 console.log(`Fetching user with ID: ${id}`);
 }
}

const databaseService = new DatabaseService();
const userService = new UserService(databaseService);
userService.getUser(123);
            

              
                Copy
              
            
          

इस उदाहरण में, हम reflect-metadata का उपयोग कर रहे हैं (जावास्क्रिप्ट/टाइपस्क्रिप्ट में डिपेंडेंसी इंजेक्शन के साथ काम करते समय एक आम प्रथा)। @Inject डेकोरेटर UserService कंस्ट्रक्टर को DatabaseService का एक इंस्टेंस इंजेक्ट करने के लिए कहता है। हालांकि उपरोक्त उदाहरण आगे के सेटअप के बिना पूरी तरह से निष्पादित नहीं हो सकता है, यह इच्छित प्रभाव को प्रदर्शित करता है।

उपयोग के मामले और लाभ

डेकोरेटर्स कई तरह के लाभ प्रदान करते हैं और विभिन्न उपयोग मामलों में लागू किए जा सकते हैं:

• मेटाडेटा एनोटेशन: डेकोरेटर्स का उपयोग क्लास, मेथड और प्रॉपर्टीज के साथ मेटाडेटा संलग्न करने के लिए किया जा सकता है। इस मेटाडेटा का उपयोग फ्रेमवर्क और लाइब्रेरीज द्वारा अतिरिक्त कार्यक्षमता प्रदान करने के लिए किया जा सकता है, जैसे कि डिपेंडेंसी इंजेक्शन, रूटिंग और वैलिडेशन।
• पहलू-उन्मुख प्रोग्रामिंग (AOP): डेकोरेटर्स लॉगिंग, सुरक्षा और लेनदेन प्रबंधन जैसी AOP अवधारणाओं को लागू कर सकते हैं, जिसमें मेथड्स को अतिरिक्त व्यवहार के साथ लपेटा जाता है।
• कोड का पुन: उपयोग: डेकोरेटर्स सामान्य कार्यक्षमता को पुन: प्रयोज्य डेकोरेटर्स में निकालकर कोड के पुन: उपयोग को बढ़ावा देते हैं।
• बेहतर पठनीयता: डेकोरेटर्स चिंताओं को अलग करके और बॉयलरप्लेट कोड को कम करके कोड को अधिक पठनीय और घोषणात्मक बनाते हैं।
• फ्रेमवर्क एकीकरण: डेकोरेटर्स का व्यापक रूप से एंगुलर, नेस्टजेएस, और मोबएक्स जैसे लोकप्रिय जावास्क्रिप्ट फ्रेमवर्क में उपयोग किया जाता है ताकि घटकों, सेवाओं और अन्य फ्रेमवर्क-विशिष्ट अवधारणाओं को परिभाषित करने का एक अधिक घोषणात्मक और अभिव्यंजक तरीका प्रदान किया जा सके।

वास्तविक दुनिया के उदाहरण और अंतर्राष्ट्रीय विचार

जबकि डेकोरेटर्स की मुख्य अवधारणाएं विभिन्न प्रोग्रामिंग संदर्भों में समान रहती हैं, उनका अनुप्रयोग उपयोग किए गए विशिष्ट फ्रेमवर्क या लाइब्रेरी के आधार पर भिन्न हो सकता है। यहाँ कुछ उदाहरण दिए गए हैं:

• एंगुलर (Google द्वारा विकसित, विश्व स्तर पर उपयोग किया जाता है): एंगुलर घटकों, सेवाओं और निर्देशों को परिभाषित करने के लिए डेकोरेटर्स का भारी उपयोग करता है। उदाहरण के लिए, @Component डेकोरेटर का उपयोग एक UI घटक को उसके टेम्पलेट, स्टाइल और अन्य मेटाडेटा के साथ परिभाषित करने के लिए किया जाता है। यह विभिन्न पृष्ठभूमि के डेवलपर्स को एक मानकीकृत दृष्टिकोण का उपयोग करके आसानी से जटिल उपयोगकर्ता इंटरफ़ेस बनाने और प्रबंधित करने की अनुमति देता है।

              
   @Component({
   selector: 'app-my-component',
   templateUrl: './my-component.html',
   styleUrls: ['./my-component.css']
   })
   class MyComponent {
   // Component logic here
   }
   
              
  
                
                  Copy
                
              
            

• नेस्टजेएस (एंगुलर से प्रेरित एक Node.js फ्रेमवर्क, विश्व स्तर पर अपनाया गया): नेस्टजेएस नियंत्रकों, मार्गों और मॉड्यूल को परिभाषित करने के लिए डेकोरेटर्स का उपयोग करता है। @Controller और @Get डेकोरेटर्स का उपयोग API एंडपॉइंट और उनके संबंधित हैंडलर को परिभाषित करने के लिए किया जाता है। यह डेवलपर के भौगोलिक स्थान की परवाह किए बिना, स्केलेबल और रखरखाव योग्य सर्वर-साइड एप्लिकेशन बनाने की प्रक्रिया को सरल बनाता है।

              
   @Controller('users')
   class UsersController {
   @Get()
   findAll(): string {
   return 'This action returns all users';
   }
   }
   
              
  
                
                  Copy
                
              
            

• मोबएक्स (एक स्टेट मैनेजमेंट लाइब्रेरी, जो विश्व स्तर पर रिएक्ट अनुप्रयोगों में व्यापक रूप से उपयोग की जाती है): मोबएक्स देखने योग्य गुणों और परिकलित मानों को परिभाषित करने के लिए डेकोरेटर्स का उपयोग करता है। @observable और @computed डेकोरेटर्स स्वचालित रूप से डेटा में परिवर्तनों को ट्रैक करते हैं और तदनुसार UI को अपडेट करते हैं। यह डेवलपर्स को अंतरराष्ट्रीय दर्शकों के लिए उत्तरदायी और कुशल उपयोगकर्ता इंटरफ़ेस बनाने में मदद करता है, जिससे जटिल डेटा प्रवाह के साथ भी एक सहज उपयोगकर्ता अनुभव सुनिश्चित होता है।

              
   class Store {
   @observable count = 0;
  
   @computed get doubledCount() {
   return this.count * 2;
   }
  
   increment() {
   this.count++;
   }
   }
   
              
  
                
                  Copy
                
              
            

अंतर्राष्ट्रीयकरण संबंधी विचार: जब वैश्विक दर्शकों को लक्षित करने वाली परियोजनाओं में डेकोरेटर्स का उपयोग किया जाता है, तो अंतर्राष्ट्रीयकरण (i18n) और स्थानीयकरण (l10n) पर विचार करना महत्वपूर्ण है। जबकि डेकोरेटर्स स्वयं सीधे i18n/l10n को नहीं संभालते हैं, उनका उपयोग प्रक्रिया को बढ़ाने के लिए किया जा सकता है:

• अनुवाद के लिए मेटाडेटा जोड़ना: डेकोरेटर्स का उपयोग उन गुणों या मेथड्स को चिह्नित करने के लिए किया जा सकता है जिनका अनुवाद करने की आवश्यकता है। इस मेटाडेटा का उपयोग i18n लाइब्रेरीज द्वारा संबंधित पाठ को निकालने और अनुवाद करने के लिए किया जा सकता है।
• अनुवादों को गतिशील रूप से लोड करना: डेकोरेटर्स का उपयोग उपयोगकर्ता के लोकेल के आधार पर अनुवादों को गतिशील रूप से लोड करने के लिए किया जा सकता है। यह सुनिश्चित करता है कि एप्लिकेशन उपयोगकर्ता की पसंदीदा भाषा में प्रदर्शित हो, चाहे उनका स्थान कुछ भी हो।
• तिथियों और संख्याओं को प्रारूपित करना: डेकोरेटर्स का उपयोग उपयोगकर्ता के लोकेल के अनुसार तिथियों और संख्याओं को प्रारूपित करने के लिए किया जा सकता है। यह सुनिश्चित करता है कि तिथियां और संख्याएं सांस्कृतिक रूप से उपयुक्त प्रारूप में प्रदर्शित हों।

उदाहरण के लिए, एक डेकोरेटर `@Translatable` की कल्पना करें जो किसी प्रॉपर्टी को अनुवाद की आवश्यकता के रूप में चिह्नित करता है। एक i18n लाइब्रेरी तब कोडबेस को स्कैन कर सकती है, `@Translatable` से चिह्नित सभी प्रॉपर्टीज को ढूंढ सकती है, और अनुवाद के लिए टेक्स्ट निकाल सकती है। अनुवाद के बाद, लाइब्रेरी उपयोगकर्ता के लोकेल के आधार पर मूल टेक्स्ट को अनुवादित संस्करण से बदल सकती है। यह दृष्टिकोण एक अधिक संगठित और रखरखाव योग्य i18n/l10n वर्कफ़्लो को बढ़ावा देता है, विशेष रूप से बड़े और जटिल अनुप्रयोगों में।

प्रस्ताव की वर्तमान स्थिति और ब्राउज़र समर्थन

जावास्क्रिप्ट डेकोरेटर्स प्रस्ताव वर्तमान में TC39 मानकीकरण प्रक्रिया में स्टेज 3 पर है। इसका मतलब है कि प्रस्ताव अपेक्षाकृत स्थिर है और भविष्य के ECMAScript विनिर्देश में शामिल होने की संभावना है।

जबकि डेकोरेटर्स के लिए नेटिव ब्राउज़र समर्थन अभी भी सीमित है, उन्हें बेबेल जैसे ट्रांसपाइलर्स या टाइपस्क्रिप्ट कंपाइलर का उपयोग करके अधिकांश आधुनिक जावास्क्रिप्ट परियोजनाओं में उपयोग किया जा सकता है। ये उपकरण डेकोरेटर सिंटैक्स को मानक जावास्क्रिप्ट कोड में बदलते हैं जिसे किसी भी ब्राउज़र या Node.js वातावरण में निष्पादित किया जा सकता है।

बेबेल का उपयोग करना: बेबेल के साथ डेकोरेटर्स का उपयोग करने के लिए, आपको @babel/plugin-proposal-decorators प्लगइन स्थापित करना होगा और इसे अपनी बेबेल कॉन्फ़िगरेशन फ़ाइल (.babelrc या babel.config.js) में कॉन्फ़िगर करना होगा। आपको संभवतः `@babel/plugin-proposal-class-properties` की भी आवश्यकता होगी।

            
 // babel.config.js
 module.exports = {
 presets: ['@babel/preset-env'],
 plugins: [
 ['@babel/plugin-proposal-decorators', { legacy: true }],
 ['@babel/plugin-proposal-class-properties', { loose: true }]
 ],
 };
 
            

              
                Copy
              
            
          

टाइपस्क्रिप्ट का उपयोग करना: टाइपस्क्रिप्ट में डेकोरेटर्स के लिए अंतर्निहित समर्थन है। आपको अपनी tsconfig.json फ़ाइल में experimentalDecorators कंपाइलर विकल्प को सक्षम करना होगा।

            
 // tsconfig.json
 {
 "compilerOptions": {
 "target": "es5",
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true,  // Optional, but useful for dependency injection
 }
 }
 
            

              
                Copy
              
            
          

emitDecoratorMetadata विकल्प पर ध्यान दें। यह reflect-metadata जैसी लाइब्रेरीज के साथ काम करता है ताकि डेकोरेटर्स के माध्यम से डिपेंडेंसी इंजेक्शन को सक्षम किया जा सके।

संभावित प्रभाव और भविष्य की दिशाएँ

जावास्क्रिप्ट डेकोरेटर्स प्रस्ताव में हमारे जावास्क्रिप्ट कोड लिखने के तरीके को महत्वपूर्ण रूप से प्रभावित करने की क्षमता है। क्लास, मेथड और प्रॉपर्टीज में कार्यक्षमता जोड़ने का एक अधिक घोषणात्मक और अभिव्यंजक तरीका प्रदान करके, डेकोरेटर्स कोड पठनीयता, रखरखाव और पुन: प्रयोज्यता में सुधार कर सकते हैं।

जैसे-जैसे प्रस्ताव मानकीकरण प्रक्रिया के माध्यम से आगे बढ़ता है और व्यापक रूप से अपनाया जाता है, हम उम्मीद कर सकते हैं कि अधिक फ्रेमवर्क और लाइब्रेरीज एक अधिक सहज और शक्तिशाली डेवलपर अनुभव प्रदान करने के लिए डेकोरेटर्स को अपनाएंगे।

इसके अलावा, डेकोरेटर्स की मेटाडेटा क्षमताएं टूलिंग और कोड विश्लेषण के लिए नई संभावनाएं सक्षम कर सकती हैं। उदाहरण के लिए, लिंटर्स और कोड एडिटर्स डेकोरेटर मेटाडेटा का उपयोग अधिक सटीक और प्रासंगिक सुझाव और त्रुटि संदेश प्रदान करने के लिए कर सकते हैं।

निष्कर्ष

जावास्क्रिप्ट डेकोरेटर्स एक शक्तिशाली और आशाजनक सुविधा है जो आधुनिक जावास्क्रिप्ट विकास को महत्वपूर्ण रूप से बढ़ा सकती है। उनके सिंटैक्स, क्षमताओं और संभावित उपयोग के मामलों को समझकर, डेवलपर्स अधिक रखरखाव योग्य, पठनीय और पुन: प्रयोज्य कोड लिखने के लिए डेकोरेटर्स का लाभ उठा सकते हैं। जबकि नेटिव ब्राउज़र समर्थन अभी भी विकसित हो रहा है, बेबेल और टाइपस्क्रिप्ट जैसे ट्रांसपाइलर्स आज अधिकांश जावास्क्रिप्ट परियोजनाओं में डेकोरेटर्स का उपयोग करना संभव बनाते हैं। जैसे-जैसे प्रस्ताव मानकीकरण की ओर बढ़ता है और व्यापक रूप से अपनाया जाता है, डेकोरेटर्स जावास्क्रिप्ट डेवलपर के शस्त्रागार में एक आवश्यक उपकरण बनने की संभावना है।

और जानें

• TC39 डेकोरेटर्स प्रस्ताव
• टाइपस्क्रिप्ट डेकोरेटर्स
• बेबेल प्लगइन प्रस्ताव डेकोरेटर्स
• reflect-metadata