export default مقابل export: ماذا تختار في TypeScript؟

TypeScript export مقابل default export: نفهم الفرق مرة واحدة وإلى الأبد

مرحباً يا صديقي! إذا كنت قد بدأت للتو رحلتك مع TypeScript (أو لم تعد مبتدئاً ولكنك لا تزال تحتار في التصدير)، فهذه المقالة هي طوق نجاة لك. موضوع "TypeScript export مقابل default export" هو من أكثر المواضيع سخونة على Stack Overflow، وليس من دون سبب. يبدو الأمر بسيطاً، لكن كم من الجدل دار حوله! دعنا نرتب الأمور ونفهمها بشكل نهائي، ونحفظ متى نستخدم export ومتى نستخدم export default.

لن نكتفي بسرد القواعد بشكل جاف. سنستعرض أمثلة حية، وأخطاء شائعة للمبتدئين، ونقدم توصيات محددة. هيا بنا!

ما هو التصدير في TypeScript ولماذا نحتاجه؟

تخيل أنك تكتب برنامجاً كبيراً. هل ستضع كل الكود في ملف واحد؟ بالطبع لا. ستقسمه إلى وحدات: ملف واحد للتعامل مع المستخدمين، وآخر للحسابات، وثالث للواجهة. التصدير هو طريقة لإخبار TypeScript: "مرحباً، هذه الدالة، أو الكلاس، أو المتغير يمكن استخدامها في ملفات أخرى". أما الاستيراد فهو طريقة لإخباره: "أعطني هذه القطعة من الملف الآخر".

في TypeScript، هناك نوعان رئيسيان من التصدير: التصدير المُسمى (named export) والتصدير الافتراضي (default export). وهنا يبدأ الجزء الممتع.

التصدير المُسمى (named export) — الدقة والتنظيم

التصدير المُسمى هو عندما تحدد بوضوح اسم ما تقوم بتصديره. الأمر يشبه وضع ملصق ساطع على كل صندوق في مرآبك: "أدوات"، "معدات رياضية"، "كتب دراسية قديمة".

الصيغة بسيطة جداً. فقط أضف الكلمة المفتاحية export قبل التعريف:

مثال على التصدير المُسمى

// utils.ts\nexport const PI = 3.14159;\n\nexport function calculateArea(radius: number): number {\n  return PI * radius * radius;\n}\n\nexport class Circle {\n  constructor(public radius: number) {}\n}

والآن لنستورد هذا في ملف آخر:

// app.ts\nimport { PI, calculateArea, Circle } from './utils';\n\nconsole.log(PI); // 3.14159\nconst area = calculateArea(5);\nconst myCircle = new Circle(10);

لاحظ الأقواس المتعرجة { } عند الاستيراد. إنها علامة أكيدة على التصدير المُسمى. يمكنك استيراد ما تحتاجه فقط، ويجب عليك استخدام نفس الأسماء المحددة عند التصدير (أو إعادة تسميتها باستخدام as، لكن سنتحدث عن ذلك لاحقاً).

مزايا التصدير المُسمى

\n
• الوضوح: ترى دائماً ما يتم تصديره بالضبط من الوحدة.
\n
• الإكمال التلقائي: بيئة التطوير المتكاملة (IDE) مثل VS Code تقترح الأسماء بشكل ممتاز عند الاستيراد.
\n
• إعادة الهيكلة: إذا أعدت تسمية دالة مصدرة، فإن IDE يعيد تسميتها في جميع أماكن الاستيراد. هذا آمن.
\n
• Tree-shaking: أدوات التجميع (Webpack, Vite) يمكنها "إزالة" الكود غير المستخدم، مما يقلل حجم الحزمة النهائية.
\n

التصدير الافتراضي (default export) — الراحة والاختصار

التصدير الافتراضي هو عندما تقول: "هناك كيان رئيسي واحد في هذا الملف، وأريده أن يكون سهل الاستيراد". الأمر يشبه قولك: "هذه بطاقة عملي، عليها كل الأساسيات".

يمكن أن يكون لكل وحدة تصدير افتراضي واحد فقط. الصيغة:

مثال على التصدير الافتراضي

// logger.ts\nconst log = (message: string): void => {\n  console.log(`[LOG]: ${message}`);\n};\n\nexport default log;

أو يمكنك التعريف مباشرة:

export default function log(message: string): void {\n  console.log(`[LOG]: ${message}`);\n}

الاستيراد يبدو هكذا (بدون أقواس متعرجة!):

// main.ts\nimport myLog from '