इस लेख में, हम टाइपडॉक में कंपोनेंट डेकोरेटर का विश्लेषण करते हैं।

आइए एक कदम पीछे जाएं और पहले समझें कि टाइपस्क्रिप्ट में डेकोरेटर क्या है।

टाइपस्क्रिप्ट में डेकोरेटर

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

उदाहरण के लिए, डेकोरेटर @सील्ड को देखते हुए हम सीलबंद फ़ंक्शन को इस प्रकार लिख सकते हैं:

function sealed(target) {
  // do something with 'target' ...
}

टाइपस्क्रिप्ट में क्लास डेकोरेटर

आइए क्लास डेकोरेटर का उपयोग करने के तरीके के बारे में टाइपस्क्रिप्ट दस्तावेज़ से एक सरल और समझने में आसान उदाहरण चुनें।

@sealed
class BugReport {
  type = "report";
  title: string;

  constructor(t: string) {
    this.title = t;
  }
}

यहाँ @sealed एक क्लास डेकोरेटर है जिसे क्लास डिक्लेरेशन के ठीक ऊपर लगाया जाता है। यह @sealed एक डेकोरेटर है जिसे रन टाइम पर लगाया जाता है।

यदि आप क्लास बगरिपोर्ट में किसी भी संशोधन को रोकना चाहते हैं, तो आप नीचे दिए गए सीलबंद फ़ंक्शन को परिभाषित कर सकते हैं:

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

जब @sealed निष्पादित किया जाता है, तो यह कंस्ट्रक्टर और उसके प्रोटोटाइप दोनों को सील कर देगा, और इसलिए BugReport.prototype तक पहुंच कर या BugReport पर गुणों को परिभाषित करके रनटाइम के दौरान इस क्लास में किसी भी अन्य कार्यक्षमता को जोड़ने या हटाने से रोक देगा - स्रोत

इस ज्ञान के साथ, अब हम टाइपडॉक कोड बेस में @Component डेकोरेटर को समझने के लिए तैयार हैं।

@टाइपडॉक में कंपोनेंट डेकोरेटर

@कंपोनेंट डेकोरेटर lib/utils/components.ts से आयात किया गया है

यह एक डेकोरेटर फैक्ट्री है जो एक एरो फ़ंक्शन लौटाती है जिसे रन टाइम पर निष्पादित किया जाता है। आप टीएस डॉक्स में डेकोरेटर फैक्ट्री के बारे में अधिक पढ़ सकते हैं।

export function Component(options: ComponentOptions) {
    // _context is ClassDecoratorContext, but that then requires a public constructor
    // which Application does not have.
    return (target: Function, _context: unknown) => {
        const proto = target.prototype;
        if (!(proto instanceof AbstractComponent)) {
            throw new Error(
                "The `Component` decorator can only be used with a subclass of `AbstractComponent`.",
            );
        }

        if (options.childClass) {
            if (!(proto instanceof ChildableComponent)) {
                throw new Error(
                    "The `Component` decorator accepts the parameter `childClass` only when used with a subclass of `ChildableComponent`.",
                );
            }

            childMappings.push({
                host: proto,
                child: options.childClass,
            });
        }

        const name = options.name;
        if (name) {
            proto.componentName = name;
        }

        // If not marked internal, and if we are a subclass of another component T's declared
        // childClass, then register ourselves as a _defaultComponents of T.
        const internal = !!options.internal;
        if (name && !internal) {
            for (const childMapping of childMappings) {
                if (!(proto instanceof childMapping.child)) {
                    continue;
                }

                const host = childMapping.host;
                host["_defaultComponents"] = host["_defaultComponents"] || {};
                host["_defaultComponents"][name] = target as any;
                break;
            }
        }
    };
}

इस कंपोनेंट डेकोरेटर में बहुत कुछ हो रहा है, इसे समझने की कोशिश करने के बजाय, आइए हम जो आसान निष्कर्ष निकाल सकते हैं उन्हें चुनें।

1. प्रोटो इंस्टेंसऑफ़

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

2. प्रोटो.घटकनाम

proto.componentName को डेकोरेटर को दिए गए नाम के आधार पर अपडेट किया जाता है। इस मामले में, नाम "एप्लिकेशन" पर सेट है।

3. चाइल्डमैपिंग

// If not marked internal, and if we are a subclass of 
// another component T's declared
// childClass, then register ourselves as a _defaultComponents of T.
const internal = !!options.internal;
if (name && !internal) {
    for (const childMapping of childMappings) {
        if (!(proto instanceof childMapping.child)) {
            continue;
        }

        const host = childMapping.host;
        host["_defaultComponents"] = host["_defaultComponents"] || {};
        host["_defaultComponents"][name] = target as any;
        break;
    }
}

childMapping.host में कुछ अपडेट किए गए हैं

हमारे बारे में:

थिंक थ्रू में, हम ओपन-सोर्स परियोजनाओं में उपयोग की जाने वाली उन्नत कोडबेस वास्तुशिल्प अवधारणाओं को सिखाने के मिशन पर हैं।

नेक्स्ट.जेएस/रिएक्ट में उन्नत वास्तुशिल्प अवधारणाओं का अभ्यास करके अपने कोडिंग कौशल को 10 गुना करें, सर्वोत्तम प्रथाओं को सीखें और उत्पादन-ग्रेड परियोजनाओं का निर्माण करें।

हम खुले स्रोत हैं - https://github.com/thinkthroo/thinkthroo (हमें एक स्टार अवश्य दें!)

हम वेब विकास और तकनीकी लेखन सेवाएं भी प्रदान करते हैं। अधिक जानने के लिए [email protected] पर हमसे संपर्क करें!

संदर्भ:

1. https://github.com/TypeStrong/typedoc/blob/master/src/lib/application.ts#L100

2. https://www.typescriptlang.org/docs/handbook/decorator.html

3. https://github.com/TypeStrong/typedoc/blob/master/src/lib/utils/component.ts#L39

4. https://www.typescriptlang.org/docs/handbook/decorators.html#decorator-factories