TypeScript: تثبيت TypeScript وتهيئته

آخر تحديث: 2026-08-26

لا يتطلب تثبيت TypeScript سوى أمر واحد، لكن إعداد بيئة التطوير الخاصة بك يتطلب فهم بعض المفاهيم الأساسية — وسيرشدك هذا الدرس إلى كيفية إعداد «مساحة العمل» الخاصة بك في TypeScript من الصفر.

1. تثبيت TypeScript

يتم تثبيت TypeScript عبر npm (مدير الحزم الخاص بـ Node.js). ستحتاج أولاً إلى تثبيت Node.js على جهاز الكمبيوتر الخاص بك.

(1) تحقق من تثبيت Node.js

افتح «المحطة الطرفية» (PowerShell في نظام Windows، و«Terminal» في نظام macOS)، واكتب:

node --version
npm --version

إذا رأيت رقم إصدار (مثل v18.17.0 و9.6.3)، فهذا يعني أنه مثبت بالفعل. إذا ظهرت لك رسالة الخطأ «لم يتم العثور على الأمر»، فيُرجى الانتقال إلى الموقع الرسمي لـ Node.js لتنزيل الإصدار LTS وتثبيته أولاً.

(2) تثبيت TypeScript على مستوى النظام

npm install -g typescript

يشير -g إلى تثبيت شامل؛ وبمجرد التثبيت، يمكنك استخدام الأمر tsc من أي دليل.

(3) التحقق من نجاح عملية التثبيت

tsc --version

إذا رأيت ناتجًا مشابهًا لـ Version 5.3.3، فهذا يعني أن التثبيت قد تم بنجاح.

▶ مثال: التحقق من حالة تثبيت TypeScript

# Execute the following commands in order，Confirm that the environment is ready
node --version
npm --version
tsc --version

الناتج:

v18.17.0
9.6.3
Version 5.3.3

2. ملف tsconfig.json الأول

tsconfig.json هو ملف تكوين لمشاريع TypeScript يحدد للمترجم كيفية معالجة الكود الخاص بك. وعلى الرغم من أن المشاريع البسيطة قد لا تحتاج إليه، إلا أن معظم مشاريع TS في مجال التطوير الفعلي تتضمن هذا الملف.

(1) الإنشاء السريع

في دليل المشروع، قم بتشغيل الأمر التالي:

tsc --init

سيؤدي ذلك تلقائيًا إلى إنشاء ملف tsconfig.json يحتوي على جميع الخيارات القابلة للتكوين (معظمها مُعلَّق).

(2) شرح خيارات التكوين الرئيسية

يحتوي ملف التكوين الذي تم إنشاؤه حديثًا على الكثير من المعلومات، لكن على المبتدئين التركيز فقط على هذه النقاط القليلة:

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true
  }
}

▶ مثال: ملف tsconfig.json مناسب لهذا الدرس

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

الناتج:

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

3. إعدادات VS Code

يُعتبر كل من VS Code وTypeScript «شقيقين» — فكلاهما من منتجات Microsoft، ويدعم VS Code لغة TypeScript بشكل افتراضي، دون الحاجة إلى تثبيت أي ملحقات إضافية.

(1) الميزات المدمجة

يأتي VS Code مزودًا بدعم مدمج للغة TypeScript، والذي يوفر:

• يتم تمييز أخطاء الكتابة في الوقت الفعلي باللون الأحمر (خط تحت متعرج)
• الإكمال التلقائي (اكتب . لعرض اقتراحات للخصائص والطرق)
• مرر مؤشر الفأرة فوق عنصر ما لعرض نوعه
• اضغط على المفتاح F12 للانتقال إلى التعريف
• اضغط على المفتاح F2 لإعادة تسمية متغير (يتم تحديث جميع الإشارات إليه تلقائيًا)

(2) المكونات الإضافية الموصى بها

(3) تهيئة التجميع التلقائي

في VS Code، اضغط على Ctrl+Shift+B (Cmd+Shift+B في نظام macOS)، ثم حدد tsc: watch، وسيقوم VS Code بمراقبة التغييرات التي تطرأ على الملف في الخلفية — ففي كل مرة تقوم فيها بحفظ الملف .ts، سيقوم البرنامج تلقائيًا بترجمة الملف إلى .js، لذا لن تحتاج إلى تشغيل tsc يدويًّا.

4. هيكل مجلدات المشروع

يبدو مشروع TypeScript القياسي كما يلي:

my-project/
├── src/              ← TypeScript Source Code
│   ├── index.ts      ← Input File
│   └── utils.ts      ← Tools Module
├── dist/             ← Compilation output JavaScript（Automatically Generated，Do not edit manually）
│   ├── index.js
│   └── utils.js
├── tsconfig.json     ← TypeScript Layout
├── package.json      ← Node.js Project Configuration
└── node_modules/     ← Dependency Packages（Automatically Generated，Do not submit to git）

5. حل المشكلات الشائعة المتعلقة بالتثبيت

▶ مثال: تجميع وتشغيل TypeScript باستخدام tsc

// src/hello.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));

الناتج:

// Executed successfully

# Compile and run
tsc src/hello.ts          # Generates dist/hello.js
node dist/hello.js        # Output: Hello, TypeScript!

الناتج:

tsc src/hello.ts          → يقوم بالتجميع إلى dist/hello.js
node dist/hello.js        → Hello, TypeScript!

❓ أسئلة شائعة

📖 ملخص

• تم التثبيت عبر npm install -g typescript، وتم التحقق عبر tsc --version
• tsconfig.json هو العنصر الأساسي في تكوين المشروع؛ ويجب تمكين strict: true
• يدعم VS Code لغة TypeScript فور تثبيته؛ ونوصي بتمكين tsc: watch التجميع التلقائي
• الهيكل القياسي للمشروع: src/ لشفرة المصدر، وdist/ لنتائج عملية البناء؛ يرجى عدم تعديل المجلد dist يدويًّا
• إذا واجهت مشكلة، فتحقق أولاً من مسار PATH وترميز الأحرف؛ فـ 90% من مشكلات التثبيت تنشأ عن هذين العاملين.

📝 تمارين

1. تمرين أساسي (مستوى الصعوبة: ⭐): قم بتثبيت TypeScript على جهاز الكمبيوتر الخاص بك، وقم بتشغيل tsc --version للتحقق من نجاح التثبيت، وقم بتدوين رقم الإصدار.
2. مشكلة متقدمة (درجة الصعوبة ⭐⭐): أنشئ دليلًا للمشروع، وقم بتشغيل tsc --init لإنشاء tsconfig.json، ثم قم بتعيين strict إلى true، وoutDir إلى "./dist"، وrootDir إلى "./src".
3. التحدي (الصعوبة: ⭐⭐⭐): افتح دليل المشروع الذي أنشأته في الخطوة السابقة في VS Code، وقم بتكوين وضع التجميع التلقائي tsc: watch، وحاول تعديل القيمة target في tsconfig.json (بتغييرها من ES2020 إلى ES5). لاحظ كيف يتغير كود JS الذي تم إنشاؤه (تلميح: ستصبح الدوال السهمية دوال عادية).

فريق Web-Tutorial التقني

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

من نحن