تحسين أداء TypeScript في Visual Studio Code (2023)

تثبيت مترجم TypeScript

لتعزيز أداء البرمجة باستخدام TypeScript في Visual Studio Code، يعد تثبيت المترجم الخاص به أمرًا حاسمًا. يمكنك فعل ذلك بسهولة عبر npm، وهو إدارة حزم Node.js. في حال كان npm مثبتًا على جهاز الحاسوب، يمكنك تثبيت TypeScript بشكل عام باستخدام الأمر التالي:

npm install -g typescript

يمكنك التحقق من نجاح التثبيت باستخدام الأمر:

tsc --version

إعداد ملف tsconfig.json

تعتبر خطوة أساسية في أي مشروع TypeScript هي إضافة ملف tsconfig.json. يحدد هذا الملف إعدادات المشروع، مثل خيارات المترجم والملفات التي يجب تضمينها. فيما يلي مثال بسيط على محتوى tsconfig.json لاستخدام ES5، ووحدات CommonJS، وخرائط المصدر:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "sourceMap": true
  }
}

التحول من TypeScript إلى JavaScript

يتيح Visual Studio Code التكامل مع المترجم (tsc) من خلال مشغل المهام المدمج. يمكنك استخدام هذا لتحويل ملفات .ts إلى ملفات .js بسهولة. يعرض هذا النهج الأخطاء والتحذيرات في لوحة المشاكل.

الخطوة 1: إنشاء ملف TypeScript

قم بفتح VS Code على مجلد فارغ وأنشئ ملف helloworld.ts، ثم ضع الشيفرة التالية:

let message: string = 'مرحباً بكم في العالم';
console.log(message);

للتحقق من تثبيت المترجم بشكل صحيح، افتح الطرفية واكتب:

tsc helloworld.ts

الخطوة 2: تشغيل مهمة بناء TypeScript

قم بتشغيل مهمة البناء باختيار "tsc: build"، مما ينتج عنه ملفي HelloWorld.js و HelloWorld.js.map في المجلد.

الخطوة 3: جعل بناء TypeScript الافتراضي

يمكنك أيضًا جعل مهمة بناء TypeScript الافتراضية باختيار "TypeScript tsc: build" كمهمة افتراضية، لتشغيلها مباشرة عند تنشيط "Run Build Task".

دعم خرائط المصدر

يتيح تصحيح الأخطاء والتحذيرات في TypeScript دعم خرائط المصدر. يمكنك تكوين الخرائط من خلال الخيار --sourcemap أو عبر tsconfig.json.

موقع الملفات المولدة

يمكنك تحديد دليل الإخراج للمترجم باستخدام outDir في tsconfig.json، مما يمنع تشويش الملفات في مشروع كبير.

استخدام إصدارات TypeScript الجديدة

تتيح Visual Studio Code استخدام إصدارات مخصصة من TypeScript لتحسين تجربة التحرير. يمكنك تبديل الإصدارات بسهولة عبر مربع الرسائل أو تكوين typescript.tsdk في إعدادات المستخدم أو المشروع.

مشروعات TypeScript و JavaScript المختلطة

يمكنك تمكين JavaScript داخل مشروع TypeScript باستخدام خاصية allowJs في tsconfig.json.

المشاريع الكبيرة

عند العمل في مشروع كبير، يفضل تحسين tsconfig.json لتضمين الملفات الضرورية فقط واستخدام project references لتجزئة المشروع لتحسين أداء التحرير وأوقات البناء.

استمر في القراءة للتعرف على:

• تحرير TypeScript - ميزات التحرير الخاصة بلغة TypeScript.
• إعادة ترتيب TypeScript - تحسين الشيفرة باستخدام خدمة لغة TypeScript.
• تصحيح أخطاء TypeScript - تكوين المصحح لمشروع TypeScript الخاص بك.

باستخدام هذه النصائح والتوجيهات، يمكنك تحسين أداء البرمجة باستخدام TypeScript في Visual Studio Code وضمان تجربة تحرير سلسة وفعالة.