टाइपस्क्रिप्ट में डेकोरेटर
यह लेख टाइपस्क्रिप्ट में डेकोरेटर को समझाता है।
YouTube Video
टाइपस्क्रिप्ट में डेकोरेटर
टाइपस्क्रिप्ट डेकोरेटर कक्षाओं, विधियों, अभिगमकर्ताओं, गुणों, या पैरामीटर्स में अतिरिक्त कार्यक्षमता या व्यवहार जोड़ने का एक तंत्र है। कोड की पठनीयता और पुन: उपयोग क्षमता को बढ़ाने के लिए डेकोरेटर एक शक्तिशाली उपकरण हैं।
डेकोरेटर की मूल बातें
डेकोरेटर एक फंक्शन है जो कक्षा या कक्षा सदस्यों में अतिरिक्त कार्यक्षमता सम्मिलित करता है। डेकोरेटर टाइपस्क्रिप्ट 1.5 में पेश किए गए थे और इन्हें ECMAScript मानक के लिए भी प्रस्तावित किया गया है।
1{
2 "compilerOptions": {
3 "experimentalDecorators": true
4 }
5}- डेकोरेटर का उपयोग करने के लिए, आपको
tsconfig.jsonफ़ाइल मेंexperimentalDecoratorsविकल्प को सक्षम करना होगा।
डेकोरेटर के प्रकार
टाइपस्क्रिप्ट में, आप निम्नलिखित पाँच डेकोरेटर का उपयोग कर सकते हैं।
- क्लास डेकोरेटर एक डेकोरेटर जो किसी क्लास पर लागू किया जाता है।
- मेथड डेकोरेटर एक डेकोरेटर जो किसी क्लास के मेथड पर लागू किया जाता है।
- एक्सेसर डेकोरेटर एक डेकोरेटर जो किसी क्लास प्रॉपर्टी के गेटर या सेटटर पर लागू किया जाता है।
- प्रॉपर्टी डेकोरेटर एक डेकोरेटर जो किसी क्लास की प्रॉपर्टी पर लागू किया जाता है।
- पैरामीटर डेकोरेटर एक डेकोरेटर जो किसी मेथड के पैरामीटर पर लागू किया जाता है।
कक्षा डेकोरेटर
कक्षा डेकोरेटर वह डेकोरेटर हैं जो कक्षाओं पर लागू किए जाते हैं। कक्षा डेकोरेटर क्लास परिभाषा के ठीक ऊपर लिखे जाते हैं और क्लास कंस्ट्रक्टर तक पहुंच सकते हैं। इनका मुख्य रूप से उपयोग कक्षा के व्यवहार को बदलने या मेटाडेटा जोड़ने के लिए किया जाता है।
1function Logger(constructor: Function) {
2 console.log(`Class ${constructor.name} is being constructed`);
3}
4
5@Logger
6class Person {
7 constructor(public name: string) {}
8}
9
10const person = new Person('John');
11// Output: Class Person is being constructed
इस उदाहरण में, Logger डेकोरेटर कक्षा पर लागू किया गया है, और जब कक्षा प्रारंभ की जाती है तो कंसोल में एक संदेश प्रदर्शित होता है।
विधि डेकोरेटर
विधि डेकोरेटर कक्षा की विधियों पर लागू किए जाते हैं और विधि कॉल्स और व्यवहार को बदल सकते हैं। एक मेथड डेकोरेटर तीन आर्ग्युमेंट्स लेता है।
- क्लास का प्रोटोटाइप
- विधि का नाम
- विधि का प्रॉपर्टी विवरणक
1function LogExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
2 const originalMethod = descriptor.value;
3
4 descriptor.value = function (...args: any[]) {
5 console.time(propertyKey);
6 const result = originalMethod.apply(this, args);
7 console.timeEnd(propertyKey);
8 return result;
9 };
10}
11
12class MathOperations {
13 @LogExecutionTime
14 add(a: number, b: number): number {
15 return a + b;
16 }
17}
18
19const math = new MathOperations();
20math.add(2, 3);
21// Output: add: 0.000ms (execution time is displayed)
इस उदाहरण में, LogExecutionTime डेकोरेटर विधि पर लागू किया गया है, और विधि के निष्पादन समय को लॉग किया जाता है।
एक्सेसर डेकोरेटर
एक्सेसर डेकोरेटर्स को क्लास की प्रॉपर्टीज़ जैसे getter या setter पर लागू किया जाता है। ये प्रॉपर्टी मानों को बदलने पर व्यवहार जोड़ने के लिए उपयोगी होते हैं।
1function LogAccess(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
2 const originalGet = descriptor.get;
3 const originalSet = descriptor.set;
4
5 if (originalGet) {
6 descriptor.get = function () {
7 console.log(`Getter called for ${propertyKey}`);
8 return originalGet.call(this);
9 };
10 }
11
12 if (originalSet) {
13 descriptor.set = function (value: any) {
14 console.log(`Setter called for ${propertyKey} with value: ${value}`);
15 originalSet.call(this, value);
16 };
17 }
18}
19
20class Car {
21 private _speed: number = 0;
22
23 @LogAccess
24 get speed() {
25 return this._speed;
26 }
27
28 set speed(value: number) {
29 this._speed = value;
30 }
31}
32
33const car = new Car();
34car.speed = 120; // Setter called for speed with value: 120
35console.log(car.speed); // Getter called for speed → 120
इस उदाहरण में, एक एक्सेसर डेकोरेटर का उपयोग तब लॉग आउटपुट करने के लिए किया जाता है जब getter और setter को कॉल किया जाता है।
प्रॉपर्टी डेकोरेटर
प्रॉपर्टी डेकोरेटर्स क्लास प्रॉपर्टीज़ पर लागू होते हैं लेकिन सीधे प्रॉपर्टी के मान या व्यवहार को बदल नहीं सकते। इनका उपयोग प्रॉपर्टीज़ के मेटाडाटा को प्राप्त करने के लिए किया जाता है।
1function Readonly(target: any, propertyKey: string) {
2 Object.defineProperty(target, propertyKey, {
3 writable: false
4 });
5}
6
7class Book {
8 @Readonly
9 title: string = "TypeScript Guide";
10}
11
12const book = new Book();
13book.title = "New Title"; // Error: Cannot assign to read only property 'title'
इस उदाहरण में, Readonly डेकोरेटर title प्रॉपर्टी पर लागू किया गया है, और प्रॉपर्टी को केवल-पढ़ने योग्य बना दिया गया है।
पैरामीटर डेकोरेटर
पैरामीटर डेकोरेटर्स किसी विधि के पैरामीटर पर लागू होते हैं। इनका उपयोग आमतौर पर मेटाडाटा संग्रहीत करने या पैरामीटर को सत्यापित करने के लिए किया जाता है। डेकोरेटर्स तीन तर्क लेते हैं।
- क्लास का प्रोटोटाइप
- विधि का नाम
- पैरामीटर सूचकांक
1function LogParameter(target: any, propertyKey: string, parameterIndex: number) {
2 console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} was decorated.`);
3}
4
5class User {
6 greet(@LogParameter message: string) {
7 console.log(message);
8 }
9}
10
11const user = new User();
12user.greet('Hello!');
13// Output: Parameter at index 0 in method greet was decorated.
इस उदाहरण में, LogParameter डेकोरेटर greet विधि के पहले पैरामीटर पर लागू किया गया है, और जब विधि को कॉल किया जाता है, तो यह लॉग करता है कि पैरामीटर सजाया गया है।
डेकोरेटर्स के व्यावहारिक उदाहरण
डेकोरेटर्स का उपयोग Angular जैसे फ्रेमवर्क्स में व्यापक रूप से किया जाता है, खासकर निर्भरता निष्कर्षण और मेटाडाटा परिभाषा के लिए। उदाहरण के लिए, @Component डेकोरेटर का उपयोग नीचे दिए अनुसार Angular घटकों को परिभाषित करने के लिए करें।
1@Component({
2 selector: 'app-root',
3 template: '<h1>Hello World</h1>',
4})
5export class AppComponent {}इस प्रकार, डेकोरेटर्स को अक्सर फ्रेमवर्क और लाइब्रेरी के मुख्य हिस्सों के रूप में उपयोग किया जाता है, जो कोड को संक्षिप्त और स्पष्ट बनाए रखने में मदद करते हैं।
डेकोरेटर्स का सारांश
TypeScript डेकोरेटर्स शक्तिशाली उपकरण हैं जो लचीले ढंग से क्लासेस, विधियों और प्रॉपर्टीज़ में कार्यक्षमता जोड़ते हैं। कस्टम डेकोरेटर का उपयोग कोड की अनुरक्षणीयता और पुन: प्रयोज्यता को बेहतर बनाता है, जो आगे अमूर्तता सक्षम करता है। डेकोरेटर्स Angular और NestJS जैसे फ्रेमवर्क्स में एक महत्वपूर्ण भूमिका निभाते हैं, और इन्हें समझने से इन फ्रेमवर्क्स को गहराई से समझने में मदद मिलती है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।