TypeScript
كيف تثبت TypeScript على ويندوز وماك — دليل خطوة بخطوة 2026
📅 2026-09-30⏱ 6 دقائق قراءة
بعد أن أتقنت JavaScript في المسار السابق، حان الوقت للارتقاء إلى المستوى التالي: **TypeScript**. إنها JavaScript مع **أنواع البيانات (Types)**، مما يجعل كودك أكثر أماناً وقابلية للصيانة.
في هذا الدليل العملي، سنأخذك خطوة بخطوة لتثبيت TypeScript على **ويندوز** و**ماك** — مع حل المشاكل الشائعة.
## ما هو TypeScript؟
**TypeScript** هي لغة برمجة طورتها **Microsoft**، وهي **امتداد (Superset) لـ JavaScript**. هذا يعني:
- ✅ **كل كود JavaScript صالح في TypeScript.**
- ✅ **TypeScript تضيف ميزات جديدة** (الأنواع، الواجهات، الأدوية...).
- ✅ **يتم تحويلها (Compile) إلى JavaScript** قبل التشغيل.
**تشبيه بسيط:** تخيل أن JavaScript هي "الرسم الحر"، و TypeScript هي "الرسم الهندسي" — كلاهما ينتج صورة، لكن TypeScript أكثر دقة وتنظيماً.
## لماذا TypeScript؟
قبل أن نبدأ، دعنا نتفق على الأسباب:
- **الأمان:** تكتشف الأخطاء قبل تشغيل الكود.
- **الوضوح:** الأنواع تجعل الكود موثقاً ذاتياً.
- **أدوات أفضل:** إكمال تلقائي (IntelliSense) أقوى.
- **قابلية الصيانة:** المشاريع الكبيرة تصبح أسهل في الإدارة.
- **المطلوب في سوق العمل:** معظم الشركات الكبرى تستخدم TypeScript.
- **مدعومة من أطر العمل:** React، Angular، Vue، Node.js.
## ما ستحتاجه
<table>
<thead>
<tr>
<th>المتطلب</th>
<th>التفاصيل</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>جهاز كمبيوتر</strong></td>
<td>ويندوز 10/11 أو ماك</td>
</tr>
<tr>
<td><strong>Node.js</strong></td>
<td>الإصدار 18 أو أحدث</td>
</tr>
<tr>
<td><strong>VS Code</strong></td>
<td>محرر الأكواد</td>
</tr>
<tr>
<td><strong>وقت</strong></td>
<td>15-20 دقيقة</td>
</tr>
</tbody>
</table>
**⚠️ مهم:** إذا لم تكن قد ثبت Node.js بعد، راجع مقال "كيف تثبت JavaScript" في مسار JavaScript.
## الجزء الأول: التحقق من Node.js
قبل تثبيت TypeScript، تأكد من أن Node.js مثبت.
### على ويندوز:
1. افتح **Command Prompt** أو **PowerShell**:
- اضغط `Windows + R`
- اكتب `cmd`
- اضغط Enter
2. اكتب الأمر التالي:
```bash
node --version
```
3. **النتيجة المتوقعة:**
```bash
v20.x.x
```
4. ثم اكتب:
```bash
npm --version
```
5. **النتيجة المتوقعة:**
```bash
10.x.x
```
### على ماك:
1. افتح **Terminal**:
- اضغط `Command + Space`
- اكتب `Terminal`
- اضغط Enter
2. اكتب:
```bash
node --version
npm --version
```
**إذا ظهرت رسالة `'node' is not recognized`** — يجب تثبيت Node.js أولاً من **nodejs.org**.
## الجزء الثاني: تثبيت TypeScript
### الطريقة 1: التثبيت العام (Global)
هذه الطريقة تجعل TypeScript متاحاً في كل مكان على جهازك:
```bash
npm install -g typescript
```
**⚠️ على ماك:** قد تحتاج إلى `sudo`:
```bash
sudo npm install -g typescript
```
### الطريقة 2: التثبيت المحلي (Local) — موصى به
هذه الطريقة تثبت TypeScript في مشروع معين فقط:
```bash
mkdir typescript-learning
cd typescript-learning
npm init -y
npm install --save-dev typescript
```
**لماذا نوصي بالطريقة المحلية؟**
- لا تتعارض الإصدارات بين المشاريع.
- كل مشروع له إصداره الخاص.
- أفضل للمشاريع الكبيرة.
### الخطوة 3: التأكد من التثبيت
اكتب:
```bash
tsc --version
```
**النتيجة المتوقعة:**
```bash
Version 5.x.x
```
**إذا ظهرت رسالة `'tsc' is not recognized`** — راجع قسم "حل المشاكل" أدناه.
## الجزء الثالث: إعداد مشروع TypeScript
### الخطوة 1: إنشاء ملف `tsconfig.json`
هذا الملف يخبر TypeScript بكيفية تحويل الكود.
افتح Terminal في مجلد المشروع، واكتب:
```bash
tsc --init
```
سيتم إنشاء ملف `tsconfig.json` بإعدادات افتراضية.
### الخطوة 2: تخصيص `tsconfig.json`
افتح الملف، وابحث عن الإعدادات التالية، وعدّلها:
```json
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
```
**شرح الإعدادات:**
- **`target`:** نسخة JavaScript الناتجة (ES2020 = حديثة).
- **`strict`:** تفعيل جميع فحوصات الأنواع.
- **`outDir`:** مجلد الملفات المحولة.
- **`rootDir`:** مجلد ملفات TypeScript المصدرية.
### الخطوة 3: إنشاء أول ملف TypeScript
1. أنشئ مجلد `src` في المشروع.
2. داخل `src`، أنشئ ملف `hello.ts`.
اكتب فيه:
```typescript
const message: string = "مرحباً بالعالم!";
console.log(message);
```
**⚠️ لاحظ:** `: string` — هذا هو **نوع البيانات** الذي يميز TypeScript عن JavaScript.
### الخطوة 4: تحويل TypeScript إلى JavaScript
في Terminal، اكتب:
```bash
tsc
```
سيتم إنشاء مجلد `dist` يحتوي على ملف `hello.js`.
### الخطوة 5: تشغيل الملف
```bash
node dist/hello.js
```
**النتيجة:**
```bash
مرحباً بالعالم!
```
**🎉 مبروك! لقد كتبت وشغّلت أول برنامج TypeScript!**
## الجزء الرابع: إعداد VS Code
### تثبيت إضافة TypeScript
1. افتح VS Code
2. اضغط `Ctrl + Shift + X`
3. ابحث عن **TypeScript** (يأتي مثبتاً افتراضياً في VS Code)
4. تأكد من تفعيله
### تفعيل المراقبة التلقائية (Watch Mode)
بدلاً من تشغيل `tsc` يدوياً في كل مرة، استخدم:
```bash
tsc --watch
```
الآن أي تغيير في ملف `.ts` سيتم تحويله تلقائياً.
## حل المشاكل الشائعة
### 🔴 المشكلة 1: `'tsc' is not recognized`
**السبب:** TypeScript غير مثبت عالمياً، أو لم يتم إضافته إلى PATH.
**الحل:**
**الطريقة 1 (الأسرع):** استخدم `npx`:
```bash
npx tsc --version
```
**الطريقة 2:** أعد التثبيت بشكل عام:
```bash
npm install -g typescript
```
**الطريقة 3:** إذا كان محلياً، استخدم:
```bash
npx tsc
```
بدلاً من `tsc`.
### 🔴 المشكلة 2: `error TS6053: File 'xxx.ts' not found`
**السبب:** الملف غير موجود في المسار الصحيح.
**الحل:** تأكد من:
- أنك في مجلد المشروع الصحيح.
- أن الملف موجود في `src/`.
- أن `tsconfig.json` يحتوي على `"include": ["src/**/*"]`.
### 🔴 المشكلة 3: `Cannot find module 'typescript'`
**السبب:** TypeScript غير مثبت في المشروع.
**الحل:**
```bash
npm install --save-dev typescript
```
### 🔴 المشكلة 4: `tsconfig.json` لا يعمل
**السبب:** الملف تالف أو غير صالح.
**الحل:** احذف الملف وأعد إنشاءه:
```bash
del tsconfig.json
tsc --init
```
### 🔴 المشكلة 5: الأخطاء لا تختفي في VS Code
**السبب:** VS Code يستخدم إصدار TypeScript مختلف.
**الحل:**
1. اضغط `Ctrl + Shift + P`
2. اكتب: `TypeScript: Select TypeScript Version`
3. اختر **Use Workspace Version**.
## إعداد بيئة العمل الاحترافية
### 1. تثبيت `ts-node` لتشغيل TypeScript مباشرة
بدلاً من التحويل ثم التشغيل:
```bash
npm install --save-dev ts-node
```
ثم:
```bash
npx ts-node src/hello.ts
```
**الفائدة:** تشغيل مباشر بدون إنشاء ملفات `.js`.
### 2. تثبيت `nodemon` للمراقبة التلقائية
```bash
npm install --save-dev nodemon
```
أضف في `package.json`:
```json
"scripts": {
"dev": "nodemon --exec ts-node src/hello.ts",
"build": "tsc",
"start": "node dist/hello.js"
}
```
ثم شغّل:
```bash
npm run dev
```
### 3. تثبيت `@types/node`
للحصول على أنواع Node.js:
```bash
npm install --save-dev @types/node
```
## جدول الأوامر الأساسية
<table>
<thead>
<tr>
<th>الأمر</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>tsc --version</code></td>
<td>عرض إصدار TypeScript</td>
</tr>
<tr>
<td><code>tsc --init</code></td>
<td>إنشاء ملف tsconfig.json</td>
</tr>
<tr>
<td><code>tsc</code></td>
<td>تحويل TypeScript إلى JavaScript</td>
</tr>
<tr>
<td><code>tsc --watch</code></td>
<td>المراقبة التلقائية</td>
</tr>
<tr>
<td><code>npx ts-node file.ts</code></td>
<td>تشغيل TypeScript مباشرة</td>
</tr>
<tr>
<td><code>node dist/file.js</code></td>
<td>تشغيل JavaScript المُحوَّل</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>تأكيد وجود Node.js</td>
<td>⬜</td>
</tr>
<tr>
<td>تثبيت TypeScript</td>
<td>⬜</td>
</tr>
<tr>
<td>تأكيد عمل <code>tsc --version</code></td>
<td>⬜</td>
</tr>
<tr>
<td>إنشاء tsconfig.json</td>
<td>⬜</td>
</tr>
<tr>
<td>كتابة أول ملف .ts</td>
<td>⬜</td>
</tr>
<tr>
<td>تحويله وتشغيله</td>
<td>⬜</td>
</tr>
<tr>
<td>تثبيت ts-node</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد التثبيت؟
الآن بعد أن أصبحت بيئة العمل جاهزة، حان وقت التعلم:
1. **أول برنامج TypeScript** — تعمق في الأساسيات.
2. **الأنواع الأساسية** — string, number, boolean...
3. **الواجهات (Interfaces)** — تعريف هياكل البيانات.
4. **الفئات (Classes)** — البرمجة كائنية التوجه.
## الخلاصة
تثبيت TypeScript عملية بسيطة إذا اتبعت الخطوات الصحيحة. أهم النقاط:
- ✅ **Node.js:** ضروري قبل TypeScript.
- ✅ **التثبيت المحلي:** أفضل للمشاريع.
- ✅ **tsconfig.json:** قلب مشروع TypeScript.
- ✅ **ts-node:** لتشغيل TypeScript مباشرة.
- ✅ **VS Code:** محرر ممتاز مع دعم كامل.
**تذكر:** إذا واجهت مشكلة، ابحث عنها بالإنجليزية على Google — 99% من المشاكل لها حل جاهز.
**هل نجح تثبيت TypeScript؟ شاركنا في التعليقات!**