إعداد TypeScript باستخدام Visual Studio Code

يعد Visual Studio Code (VSCode) محرر أكواد قويًا وشائعًا يوفر دعمًا ممتازًا لتطوير TypeScript. سيرشدك هذا الدليل خلال الخطوات اللازمة لإعداد TypeScript في VSCode، مما يضمن حصولك على كل ما تحتاجه لبدء الترميز بفعالية.

تثبيت Visual Studio Code

إذا لم تقم بتثبيت Visual Studio Code بالفعل، فاتبع الخطوات التالية:

1. انتقل إلى موقع VSCode الرسمي h6.
2. قم بتنزيل برنامج التثبيت لنظام التشغيل الخاص بك.
3. قم بتشغيل برنامج التثبيت واتبع الإرشادات التي تظهر على الشاشة لإكمال التثبيت.

تثبيت Node.js وnpm

يتم إدارة TypeScript من خلال npm (Node Package Manager)، والذي يتطلب Node.js. لتثبيت Node.js وnpm:

1. قم بزيارة موقع Node.js الرسمي h9.
2. قم بتنزيل وتثبيت إصدار LTS من Node.js، والذي يتضمن npm.
3. قم بالتحقق من التثبيت عن طريق فتح المحطة الطرفية وتشغيل node -v و npm -v للتحقق من إصدارات Node.js وnpm.

تثبيت TypeScript

بعد تثبيت Node.js وnpm، يمكنك الآن تثبيت TypeScript عالميًا. افتح محطة طرفية وقم بتشغيل الأمر التالي:

npm install -g typescript

يقوم هذا الأمر بتثبيت TypeScript عالميًا، مما يسمح لك باستخدام الأمر tsc لتجميع ملفات TypeScript من أي مكان على نظامك.

إعداد مشروع TypeScript

لبدء مشروع TypeScript جديد، اتبع الخطوات التالية:

1. قم بإنشاء دليل جديد لمشروعك وانتقل إليه:

mkdir my-typescript-project
cd my-typescript-project

1. تهيئة مشروع npm جديد:

npm init -y

1. تثبيت TypeScript كتبعية تطوير:

npm install --save-dev typescript

1. إنشاء ملف تكوين TypeScript:

npx tsc --init

يقوم هذا الأمر بإنشاء ملف tsconfig.json في دليل المشروع الخاص بك، والذي يحتوي على إعدادات التكوين لمترجم TypeScript.

تكوين VSCode لـ TypeScript

يأتي VSCode مع دعم TypeScript المدمج، ولكن يمكنك تحسين تجربة التطوير الخاصة بك بشكل أكبر عن طريق تكوين المحرر:

افتتاح مشروعك

افتح مشروع TypeScript الخاص بك في VSCode:

1. قم بتشغيل VSCode.
2. حدد ملف > فتح المجلد... واختر دليل المشروع الخاص بك.

تثبيت ملحقات TypeScript

على الرغم من أن VSCode يوفر دعمًا ممتازًا لـ TypeScript، إلا أنه يمكنك تثبيت ملحقات إضافية لتحسين الوظائف:

• ملحق TypeScript: يوفر دعم لغة TypeScript وميزات مثل IntelliSense والتنقل في التعليمات البرمجية والمزيد.
• أجمل: ملحق لتنسيق الكود، مما يضمن نمط كود متسق.

تكوين مُجمِّع TypeScript

افتح ملف tsconfig.json لتكوين إعدادات مُجمِّع TypeScript. فيما يلي مثال للتكوين:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

يحدد هذا التكوين إصدار ECMAScript المستهدف إلى ES6، ويحدد تنسيق وحدة CommonJS، ويمكّن فحص النوع الصارم، ويضبط دليل الإخراج إلى ./dist. كما يتضمن خرائط المصدر لتسهيل تصحيح الأخطاء.

كتابة وتشغيل كود TypeScript

قم بإنشاء ملف TypeScript جديد في الدليل src:

mkdir src
touch src/index.ts

أضف بعض أكواد TypeScript إلى index.ts:

const message: string = "Hello, TypeScript!";
console.log(message);

لتجميع كود TypeScript الخاص بك، قم بتشغيل:

npx tsc

يقوم هذا الأمر بتجميع ملفات TypeScript وإخراج ملفات JavaScript إلى الدليل dist.

لتشغيل كود JavaScript المجمّع، استخدم:

node dist/index.js

خاتمة

إن إعداد TypeScript باستخدام Visual Studio Code عملية بسيطة تتضمن تثبيت الأدوات اللازمة وتكوين مشروعك واستخدام ميزات VSCode القوية. باتباع هذا الدليل، ستحصل على بيئة تطوير TypeScript وظيفية بالكامل وستكون جاهزًا لبناء تطبيقات قوية باستخدام TypeScript.