في هذه المقالة، نقوم بتحليل المزخرف المكون في TypeDoc.

دعونا نعود خطوة إلى الوراء ونفهم أولاً ما المقصود بالديكور في TypeScript.

مصمم الديكور في TypeScript

A Decorator هو نوع خاص من الإعلانات يمكن إرفاقه بإعلان فئة أو طريقة أو ملحق أو خاصية أو معلمة. يستخدم المزخرفون النموذج @expression، حيث يجب تقييم التعبير إلى وظيفة سيتم استدعاؤها في وقت التشغيل مع معلومات حول الإعلان المزخرف. - مصدر.

على سبيل المثال، بالنظر إلى مصمم الديكور @sealed، قد نكتب الدالة المختومة على النحو التالي:

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

مصمم الفصل في TypeScript

دعونا نختار مثالًا بسيطًا وسهل الفهم من وثائق TypeScript حول كيفية استخدام مصمم الديكور.

@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 في قاعدة أكواد TypeDoc.

@Component Decorator في TypeDoc

تم استيراد مصمم الديكور @Component من lib/utils/components.ts

هذا مصنع ديكور يقوم بإرجاع دالة سهمية يتم تنفيذها في وقت التشغيل. يمكنك قراءة المزيد عن مصنع الديكور في مستندات 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

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم المفاهيم المعمارية لقاعدة التعليمات البرمجية المتقدمة المستخدمة في المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في Next.js/React، وتعلم أفضل الممارسات وبناء مشاريع على مستوى الإنتاج.

نحن مفتوح المصدر - 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/decorators.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