Softonic

مولد ملف tsconfig.json

خطوة 1 / 2
النتائج

يضم tsconfig.json ما يزيد على مئة خيار للمترجم، وكل درس في TypeScript يعرض تركيبة مختلفة منها. يركّز هذا المولّد على الخيارات المهمة لمعظم المشاريع: target وmodule وmoduleResolution وjsx، والأعلام المنطقية الشائعة (strict وesModuleInterop وskipLibCheck وأمثالها)، ومجلدا outDir/rootDir. تُحدَّث معاينة tsconfig.json فوريا مع كل تغيير في الخيارات؛ انسخها إلى جذر مشروعك لتحصل على إعداد نظيف من دون الخيارات الميتة التي تأتي مع معظم القوالب الجاهزة.

كيف يُبنى ملف الإعدادات

  1. 1

    اختر target وmodule

    إصدار JavaScript الذي يولّده tsc (من ES2015 إلى ES2023 أو ESNext) ونظام الوحدات (CommonJS أو ES2015/ES2020/ES2022 أو ESNext أو Node16 أو NodeNext).

  2. 2

    حدد moduleResolution وJSX

    اختر bundler لمشاريع Vite/webpack، وnode16/nodenext لإصدارات Node الحديثة، وnode أو classic للإعدادات القديمة. عيّن jsx على react-jsx لمشاريع React الحديثة، أو اتركه على none لإسقاط المفتاح من الملف.

  3. 3

    فعّل الأعلام

    strict وesModuleInterop وskipLibCheck وresolveJsonModule وallowJs وdeclaration وsourceMap وforceConsistentCasingInFileNames في صورة مربعات اختيار بسيطة.

  4. 4

    حدد المجلدات

    outDir وrootDir مضبوطان مسبقا على ./dist و./src، أما include وexclude فثابتان على src/**/* مع node_modules وdist.

  5. 5

    انسخ tsconfig المولّد

    تُحدَّث معاينة JSON مباشرة؛ ونقرة واحدة تنسخها جاهزة للوضع في جذر مشروعك باسم tsconfig.json.

الخيارات التي يكتبها هذا المولّد

الخيار الافتراضي هنا وظيفته
target ES2022 إصدار JavaScript للكود الناتج. ES2022 آمن للمتصفحات الحالية وNode؛ لا تختر إصدارا أقدم إلا للبيئات القديمة.
module ESNext صيغة الوحدات في الناتج. استخدم NodeNext/Node16 لمشاريع Node بنظام ESM، وCommonJS لمشاريع Node القديمة.
moduleResolution node كيفية العثور على الاستيرادات. يُفضَّل bundler مع Vite/webpack/esbuild، وnode16/nodenext مع Node الحديث؛ أما node (node10) فهو السلوك القديم.
jsx محذوف لا يُكتب إلا عند اختيار وضع. react-jsx لإصدار React 17 وما بعده، وpreserve عندما يتولى المجمّع تحويل JSX.
strict true يفعّل عائلة الفحوصات الصارمة كاملة. أبقه مفعّلا في المشاريع الجديدة.
esModuleInterop true يصلح الاستيرادات الافتراضية من حزم CommonJS.
skipLibCheck true يتخطى فحص أنواع ملفات .d.ts؛ ترجمة أسرع بكثير ونادرا ما يخفي أخطاء حقيقية.
forceConsistentCasingInFileNames true يرفض الاستيرادات التي تخالف حالة أحرف الملف على القرص (عطل كلاسيكي عند الانتقال من macOS إلى Linux).
resolveJsonModule true يتيح لك كتابة import data from "./data.json".
allowJs false يسمح بملفات .js ضمن الترجمة؛ مفيد في منتصف عملية الترحيل.
declaration false يولّد ملفات .d.ts؛ فعّله عند نشر مكتبة.
sourceMap false يولّد ملفات .js.map لتسهيل التنقيح.
outDir / rootDir ./dist / ./src أين يوضع الناتج المترجم وأين تقع ملفات المصدر.
baseUrl "." يُكتب دائما، بحيث تُحلّ أي كتلة paths تضيفها يدويا انطلاقا من جذر المشروع.

الناتج الافتراضي بالضبط

اترك كل عناصر التحكم كما هي وستحصل على هذا الملف حرفيا:

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src",
        "baseUrl": "."
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

اختر وضع jsx غير none وسيُلحق إدخال "jsx" بكتلة compilerOptions.

الوضع الصارم strict: ما الذي يفعّله فعليا

strict: true علم شامل يفعّل عائلة الفحوصات الصارمة كاملة، ومنها noImplicitAny وstrictNullChecks وstrictFunctionTypes وstrictBindCallApply وstrictPropertyInitialization وnoImplicitThis وuseUnknownInCatchVariables وalwaysStrict. المشاريع الجديدة يجب أن تبدأ بها كلها مفعّلة: إضافة الصرامة لاحقا عملية مؤلمة.

أخطاء شائعة

  • ضبط module: "CommonJS" لمشروع Node يعمل بنظام ESM. إذا كان package.json لديك يحتوي على "type": "module"، فاستخدم NodeNext لكل من module وmoduleResolution.
  • استخدام tsc كمجمّع حزم. إنه مترجم وفاحص أنواع. استخدم Vite/esbuild/SWC للبناء وtsc --noEmit لفحص الأنواع.
  • ترجمة كل شيء. من دون قائمة include يلتقط TypeScript كل ملف .ts يراه. الإعداد المولّد يكتب دائما include: ["src/**/*"] ويستبعد node_modules وdist، فأنت في مأمن.
  • الحاجة إلى أكثر مما يقدمه الإعداد. هذا المولّد بسيط عن قصد. خيارات مثل lib وpaths وisolatedModules وnoEmit يسهل إضافتها يدويا بعد وضع الملف الأساسي.

الأسئلة الشائعة

نعم في المستودعات الأحادية monorepo والمشاريع متعددة الحزم: ملف أساسي واحد يضم الخيارات المشتركة وكل حزمة ترثه عبر “extends”. أما في مستودع بمشروع واحد فملف tsconfig.json واحد مثل الملف المولّد أبسط.

أُضيف في TypeScript 5.0 للمشاريع التي تُبنى بأدوات Vite أو webpack أو esbuild. يطابق الطريقة التي تحلّ بها المجمّعات الاستيرادات فعليا، من دون قواعد امتدادات الملفات الخاصة بنظام ESM في node16/nodenext. للكود الذي يشغّله Node مباشرة، يُفضَّل node16 أو nodenext.

لا يوجد عنصر تحكم مخصص لذلك. لكن الملف المولّد يضبط baseUrl دائما على “.”، لذا يمكنك لصق كتلة paths تحته مباشرة، مثل “@/*”: [“src/*”]، وستُحلّ من جذر المشروع.

عادة لا، ولهذا يتجاهله هذا المولّد: target يستلزم مجموعة أنواع مكتبات مطابقة. تجاوز lib يدويا فقط في الحالات الخاصة، مثل الحاجة إلى واجهات DOM في مشروع Node أو أنواع WebWorker.

لا حاجة إلى تسجيل ولا يُحفظ أي شيء. تُستخدم اختياراتك فقط لعرض معاينة الإعداد، وفي طريقة العرض خطوة بخطوة تنتقل أيضا ضمن عنوان URL للصفحة، ما يسهّل حفظ إعداد جاهز أو مشاركته.

أدوات ذات صلة

مولّد إعدادات Webpack

أنشئ ملف webpack.config.js لـ webpack 5 لمشاريع JavaScript الخالصة أو React أو Vue: مع TypeScript وBabel وCSS أو Sass والصور وHtmlWebpackPlugin وخادم التطوير وسطر npm install.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مدقّق OpenAPI

الصق مستند OpenAPI أو Swagger بصيغة JSON أو YAML وافحص بنيته الأساسية: حقل الإصدار وكائن info والمسارات، مع أخطاء وتحذيرات واضحة.

مولّد مؤشرات التحميل بلغة CSS

أنشئ دوّارًا دائريًا بـ CSS خالص: اضبط القطر وسماكة الحدود واللون وسرعة الدوران، وشاهد المعاينة المباشرة، وانسخ كود CSS جاهزًا للاستخدام. بلا SVG وبلا JavaScript.

منسّق PHP

أضف فواصل أسطر ومسافات بادئة من مسافتين أو 4 مسافات إلى مقطع PHP بسيط. راجع النتيجة: فهذه الأداة ليست محلّل PHP ولا تطبّق PSR-12.

الأداة متاحة بلغات أخرى