TypeScript
أول برنامج TypeScript لك — من الكتابة إلى التنفيذ 2026
📅 2026-10-01⏱ 9 دقائق قراءة
في المقال السابق، قمنا بتثبيت TypeScript وإعداد `tsconfig.json` وتأكدنا من أن بيئة العمل جاهزة. الآن حان الوقت لكتابة **أول برنامج TypeScript** لك.
لا تقلق إذا لم تكن قد كتبت أي كود من قبل — سنبدأ من الصفر تماماً. لكن إذا كنت قد أكملت مسار JavaScript، فستجد الكثير مألوفاً.
في هذا الدليل العملي، سنأخذك خطوة بخطوة من كتابة أول سطر كود إلى تشغيله، مع تمارين وحلول لتثبيت المفاهيم.
## لماذا نبدأ ببرنامج "Hello World"؟
برنامج "Hello World" هو تقليد قديم في عالم البرمجة. السبب في أهميته:
- **يتحقق من أن بيئة العمل تعمل** — إذا ظهرت الرسالة، فكل شيء جاهز.
- **يعرّفك على بنية البرنامج** — كيف يُكتب الكود وكيف يُشغّل.
- **يعطيك إحساساً بالإنجاز** — أول برنامج يعمل هو لحظة لا تُنسى.
- **يبني الثقة** — تنتقل من "لا أعرف شيئاً" إلى "أنا أبرمج".
## الفرق بين JavaScript و TypeScript
قبل أن نكتب الكود، دعنا نلاحظ الفرق:
**JavaScript:**
```javascript
const message = "مرحباً بالعالم!";
console.log(message);
```
**TypeScript:**
```typescript
const message: string = "مرحباً بالعالم!";
console.log(message);
```
**الفرق الوحيد:** `: string` بعد اسم المتغير. هذا هو **نوع البيانات (Type Annotation)**.
**لماذا هذا مهم؟** لأن TypeScript تستخدم هذه الأنواع لاكتشاف الأخطاء **قبل** تشغيل الكود.
## الطريقة الأولى: تشغيل TypeScript في الطرفية
### الخطوة 1: إنشاء مجلد المشروع
افتح VS Code، ثم:
1. اذهب إلى **File → Open Folder**
2. اختر مجلد `typescript-learning` الذي أنشأته في المقال السابق
3. تأكد من وجود مجلد `src` وملف `tsconfig.json`
### الخطوة 2: إنشاء ملف TypeScript الأول
داخل VS Code:
1. اذهب إلى مجلد `src`
2. أنشئ ملفاً جديداً باسم `hello.ts`
3. اكتب فيه:
```typescript
const message: string = "مرحباً بالعالم!";
console.log(message);
```
احفظ الملف بـ `Ctrl + S`.
**⚠️ مهم:** امتداد الملف يجب أن يكون `.ts` (وليس `.js`).
### الخطوة 3: تحويل TypeScript إلى JavaScript
في Terminal، اكتب:
```bash
npx tsc
```
**النتيجة:** سيتم إنشاء ملف `dist/hello.js` يحتوي على:
```javascript
"use strict";
const message = "مرحباً بالعالم!";
console.log(message);
```
**لاحظ:** `: string` اختفت! هذا لأن TypeScript **تحولت** إلى JavaScript عادية.
### الخطوة 4: تشغيل البرنامج
```bash
node dist/hello.js
```
**النتيجة المتوقعة:**
```bash
مرحباً بالعالم!
```
**🎉 مبروك! لقد كتبت وشغّلت أول برنامج TypeScript!**
### الخطوة 5: استخدام `ts-node` (الأسرع)
بدلاً من التحويل ثم التشغيل، استخدم `ts-node`:
```bash
npx ts-node src/hello.ts
```
**النتيجة:** نفس النتيجة، لكن بدون إنشاء ملف `.js`.
## الطريقة الثانية: استخدام Watch Mode
بدلاً من تشغيل `tsc` يدوياً في كل مرة، استخدم:
```bash
npx tsc --watch
```
الآن أي تغيير في ملف `.ts` سيتم تحويله تلقائياً إلى `.js`.
**⚠️ مهم:** اترك Terminal مفتوحاً، وافتح Terminal آخر لتشغيل الكود.
## فهم أنواع البيانات الأساسية
الآن بعد أن كتبت أول برنامج، دعنا نتعمق في الأنواع الأساسية.
### 1. `string` — النصوص
```typescript
const name: string = "أحمد";
const greeting: string = `مرحباً ${name}`;
console.log(greeting); // مرحباً أحمد
```
### 2. `number` — الأرقام
```typescript
const age: number = 25;
const price: number = 99.99;
const temperature: number = -5;
console.log(age + price);
```
### 3. `boolean` — القيم المنطقية
```typescript
const isStudent: boolean = true;
const isMarried: boolean = false;
if (isStudent) {
console.log("أنت طالب");
}
```
### 4. `any` — أي نوع (تجنبه!)
```typescript
let data: any = "نص";
data = 25; // ✅ مسموح
data = true; // ✅ مسموح
data = [1, 2, 3]; // ✅ مسموح
```
**⚠️ تحذير:** `any` يلغي فائدة TypeScript. **تجنبه قدر الإمكان**.
### 5. `unknown` — البديل الآمن لـ `any`
```typescript
let data: unknown = "نص";
// console.log(data.toUpperCase()); // ❌ خطأ
if (typeof data === "string") {
console.log(data.toUpperCase()); // ✅ يعمل
}
```
**الفرق:** `unknown` يطلب منك التحقق من النوع قبل الاستخدام.
### 6. `void` — لا قيمة مرجعة
```typescript
function greet(): void {
console.log("مرحباً");
}
```
### 7. `never` — لا يحدث أبداً
```typescript
function throwError(message: string): never {
throw new Error(message);
}
```
### 8. `null` و `undefined`
```typescript
let nothing: null = null;
let notDefined: undefined = undefined;
```
**⚠️ في TypeScript مع `strict: true`** — `null` و `undefined` لهما أنواع خاصة.
## أنواع المصفوفات والكائنات
### 1. المصفوفات
```typescript
const numbers: number[] = [1, 2, 3, 4, 5];
const names: string[] = ["أحمد", "محمد", "علي"];
const mixed: (string | number)[] = ["أحمد", 25, "علي", 30];
```
### 2. الكائنات
```typescript
const person: { name: string; age: number } = {
name: "أحمد",
age: 25,
};
console.log(person.name);
console.log(person.age);
```
### 3. Tuples — المصفوفات ذات الطول الثابت
```typescript
const point: [number, number] = [10, 20];
const user: [string, number, boolean] = ["أحمد", 25, true];
```
**الفائدة:** تعرف مسبقاً عدد العناصر ونوعها.
## الأنواع في الدوال
### 1. معاملات الدوال
```typescript
function add(a: number, b: number): number {
return a + b;
}
console.log(add(5, 3)); // 8
// console.log(add("5", 3)); // ❌ خطأ
```
### 2. المعاملات الاختيارية
```typescript
function greet(name: string, title?: string): string {
if (title) {
return `مرحباً ${title} ${name}`;
}
return `مرحباً ${name}`;
}
console.log(greet("أحمد")); // مرحباً أحمد
console.log(greet("أحمد", "دكتور")); // مرحباً دكتور أحمد
```
### 3. القيم الافتراضية
```typescript
function greet(name: string = "زائر"): string {
return `مرحباً ${name}`;
}
console.log(greet()); // مرحباً زائر
console.log(greet("أحمد")); // مرحباً أحمد
```
### 4. الدوال السهمية
```typescript
const add = (a: number, b: number): number => a + b;
const greet = (name: string): string => `مرحباً ${name}`;
```
## مثال عملي: آلة حاسبة بسيطة
دعنا نبني آلة حاسبة صغيرة باستخدام TypeScript:
```typescript
function calculate(
a: number,
b: number,
operation: "add" | "subtract" | "multiply" | "divide"
): number {
switch (operation) {
case "add":
return a + b;
case "subtract":
return a - b;
case "multiply":
return a * b;
case "divide":
if (b === 0) throw new Error("لا يمكن القسمة على صفر");
return a / b;
}
}
console.log(calculate(10, 5, "add")); // 15
console.log(calculate(10, 5, "subtract")); // 5
console.log(calculate(10, 5, "multiply")); // 50
console.log(calculate(10, 5, "divide")); // 2
// console.log(calculate(10, 5, "power")); // ❌ خطأ: النوع غير مسموح
```
**الفائدة:** TypeScript تعرف أن `operation` يجب أن يكون أحد هذه الأربعة فقط، فتمنع الأخطاء.
## تمارين عملية
### تمرين 1: طباعة معلوماتك
اكتب برنامجاً يطبع:
- اسمك (string)
- عمرك (number)
- مدينتك (string)
- هل أنت طالب؟ (boolean)
**الحل:**
```typescript
const name: string = "أحمد";
const age: number = 25;
const city: string = "عمان";
const isStudent: boolean = true;
console.log("اسمي: " + name);
console.log("عمري: " + age);
console.log("مدينتي: " + city);
console.log("طالب؟ " + isStudent);
```
### تمرين 2: دالة حسابية
اكتب دالة تأخذ رقمين وترجع مجموعهما.
**الحل:**
```typescript
function sum(a: number, b: number): number {
return a + b;
}
console.log(sum(10, 20)); // 30
```
### تمرين 3: مصفوفة أرقام
أنشئ مصفوفة أرقام، واطبع مجموعها.
**الحل:**
```typescript
const numbers: number[] = [10, 20, 30, 40, 50];
const total: number = numbers.reduce((acc, n) => acc + n, 0);
console.log("المجموع: " + total); // 150
```
### تمرين 4: كائن كتاب
أنشئ كائناً `book` يحتوي على:
- title (string)
- author (string)
- year (number)
- price (number)
**الحل:**
```typescript
const book: { title: string; author: string; year: number; price: number } = {
title: "تعلم TypeScript",
author: "أحمد محمد",
year: 2026,
price: 49.99,
};
console.log(book.title);
console.log(book.author);
console.log(book.year);
console.log(book.price);
```
### تمرين 5: أنواع الاتحاد
اكتب دالة تأخذ `string | number`، وترجع طوله/قيمته.
**الحل:**
```typescript
function getLength(value: string | number): number {
if (typeof value === "string") {
return value.length;
}
return value.toString().length;
}
console.log(getLength("أحمد")); // 4
console.log(getLength(12345)); // 5
```
### تمرين 6: Tuple
أنشئ Tuple يمثل إحداثيات نقطة (x, y).
**الحل:**
```typescript
const point: [number, number] = [10, 20];
console.log(`X: ${point[0]}, Y: ${point[1]}`);
```
## حل المشاكل الشائعة
### 🔴 المشكلة 1: `Type 'X' is not assignable to type 'Y'`
**السبب:** حاولت تعيين قيمة بنوع مختلف عن المعلن.
```typescript
let age: number = "25"; // ❌ خطأ
```
**الحل:**
```typescript
let age: number = 25; // ✅
```
### 🔴 المشكلة 2: `Cannot find name 'X'`
**السبب:** استخدمت متغيراً قبل تعريفه.
**الحل:** تأكد من تعريف المتغير قبل استخدامه.
### 🔴 المشكلة 3: `Object is possibly 'null'`
**السبب:** TypeScript تحذرك من قيمة قد تكون `null`.
```typescript
function greet(name: string | null) {
console.log(name.toUpperCase()); // ❌
}
```
**الحل:**
```typescript
function greet(name: string | null) {
if (name !== null) {
console.log(name.toUpperCase()); // ✅
}
}
```
### 🔴 المشكلة 4: `Property 'X' does not exist on type 'Y'`
**السبب:** حاولت الوصول لخاصية غير موجودة.
```typescript
const person = { name: "أحمد", age: 25 };
console.log(person.email); // ❌
```
**الحل:** تأكد من أن الخاصية موجودة في الكائن، أو أضفها للنوع.
### 🔴 المشكلة 5: `tsc` لا يجد الملفات
**السبب:** `tsconfig.json` غير مهيأ بشكل صحيح.
**الحل:** تأكد من `"include": ["src/**/*"]` و `"rootDir": "./src"`.
## جدول الأوامر الأساسية
<table>
<thead>
<tr>
<th>الأمر</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>npx tsc</code></td>
<td>تحويل كل ملفات TypeScript</td>
</tr>
<tr>
<td><code>npx 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>
<tr>
<td><code>npx tsc --noEmit</code></td>
<td>فحص الأخطاء فقط (بدون تحويل)</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>إنشاء ملف <code>hello.ts</code></td>
<td>⬜</td>
</tr>
<tr>
<td>كتابة أول برنامج TypeScript</td>
<td>⬜</td>
</tr>
<tr>
<td>تحويله بـ <code>tsc</code></td>
<td>⬜</td>
</tr>
<tr>
<td>تشغيله بـ <code>node</code></td>
<td>⬜</td>
</tr>
<tr>
<td>استخدام <code>ts-node</code></td>
<td>⬜</td>
</tr>
<tr>
<td>فهم الأنواع الأساسية</td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الستة</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن كتبت أول برنامج TypeScript، أنت جاهز للمقال التالي:
1. **الأنواع الأساسية** — تعمق في string، number، boolean...
2. **الواجهات (Interfaces)** — تعريف هياكل البيانات.
3. **الدوال مع الأنواع** — تعمق في أنواع الدوال.
## الخلاصة
في هذا المقال، تعلمت:
- ✅ كيفية كتابة أول برنامج TypeScript.
- ✅ الفرق بين JavaScript و TypeScript.
- ✅ تحويل TypeScript إلى JavaScript.
- ✅ استخدام `ts-node` و `--watch`.
- ✅ الأنواع الأساسية: string, number, boolean, any, unknown, void, never.
- ✅ أنواع المصفوفات والكائنات.
- ✅ الأنواع في الدوال.
**تذكر:** البرمجة مهارة تُكتسب بالممارسة. لا تكتفِ بالقراءة — اكتب الكود بنفسك، وجرّب، وارتكب الأخطاء، وتعلم منها.
**هل نجحت في تشغيل أول برنامج TypeScript؟ شاركنا في التعليقات!**