توليد tsconfig.json: ما الذي يحدث تحت الغطاء؟

مقدمة: لماذا tsconfig.json ليس مجرد ملف؟

كل من كتب بلغة TypeScript ولو مرة واحدة، واجه الملف الغامض tsconfig.json. إذا كنت مبتدئًا، فغالبًا ما كنت تنسخه من التوثيق أو تبحث في جوجل عن "كيفية توليد tsconfig.json". أما إذا كنت مطورًا متمرسًا، فربما تساءلت يومًا: ما الذي يحدث بالفعل تحت الغطاء عندما أقوم بتشغيل tsc --init؟

في هذه المقالة، لن نقدم لك وصفة جاهزة فحسب، بل سنلقي نظرة داخل غرفة المحرك لمترجم TypeScript. ستتعلم كيف يقرأ المترجم التكوين، وما هي الأعلام المسؤولة عن صرامة الكود، وكيف تكتب "مولد" tsconfig.json الخاص بك بسرعة. هيا بنا!

1. ما هو tsconfig.json ولماذا هو مطلوب؟

tsconfig.json هو ملف JSON يخبر مترجم TypeScript (tsc) كيف يعالج الكود الخاص بك. بدونه، سيعمل tsc في الوضع "الافتراضي"، لكن هذا غالبًا لا يكفي للمشاريع الجادة.

تحت الغطاء، يحدد tsconfig.json:

\n
• الملفات التي سيتم ترجمتها (المفاتيح include، exclude، files).
\n
• أين يتم وضع النتائج (المفتاح outDir).
\n
• إصدارات JavaScript التي سيتم دعمها (المفتاح target).
\n
• مدى صرامة التحقق من الأنواع (المفاتيح strict، noImplicitAny وغيرها).
\n
• الوحدات والمسارات الإضافية.
\n

عندما تطرح سؤال "how can I generate a tsconfig.json file"، تكون الإجابة عادةً واحدة: tsc --init. لكن دعنا نفهم ما يولده هذا الأمر بالضبط.

2. الأمر tsc --init: ما تحت الغطاء؟

قم بتشغيل الأمر في الطرفية:

npx tsc --init

سيظهر في جذر المشروع ملف tsconfig.json يحتوي على الكثير من الإعدادات المعلقة. في الواقع، تحت الغطاء، ينفذ مترجم TypeScript الخوارزمية التالية:

\n
1. يتحقق مما إذا كان tsconfig.json موجودًا بالفعل في الدليل الحالي.
\n
2. إذا لم يكن موجودًا، يقوم بإنشاء قالب بالإعدادات الافتراضية.
\n
3. يضبط target: "es2016"، module: "commonjs"، strict: true وقيمًا معقولة أخرى.
\n
4. يعلق جميع الخيارات الأخرى، ليتمكن المطور من إلغاء تعليقها عند الحاجة.
\n

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

2.1. مثال: مولد tsconfig.json خاص بك بلغة TypeScript

تخيل أنك تكتب أداة للإعداد التلقائي للمشاريع. إليك كيف قد تبدو دالة تولد tsconfig.json تحت الغطاء:

import * as fs from 'fs';\nimport * as path from 'path';\n\ninterface TsConfig {\n  compilerOptions: {\n    target: string;\n    module: string;\n    strict: boolean;\n    outDir: string;\n    rootDir: string;\n    esModuleInterop: boolean;\n    skipLibCheck: boolean;\n    forceConsistentCasingInFileNames: boolean;\n  };\n  include: string[];\n  exclude: string[];\n}\n\nfunction generateTsConfig(\n  target: string = 'ES2020',\n  outDir: string = './dist',\n  rootDir: string = './src',\n  strict: boolean = true\n): TsConfig {\n  return {\n    compilerOptions: {\n      target,\n      module: 'commonjs',\n      strict,\n      outDir,\n      rootDir,\n      esModuleInterop: true,\n      skipLibCheck: true,\n      forceConsistentCasingInFileNames: true,\n    },\n    include: ['src/**/*'],\n    exclude: ['node_modules', 'dist'],\n  };\n}\n\n// توليد وحفظ\nconst config = generateTsConfig();\nfs.writeFileSync(\n  path.join(process.cwd(), 'tsconfig.json'),\n  JSON.stringify(config, null, 2)\n);\nconsole.log('تم إنشاء tsconfig.json!');\n