أول برنامج TypeScript لك — من الكتابة إلى التنفيذ 2026

في المقال السابق، قمنا بتثبيت TypeScript وإعداد tsconfig.json وتأكدنا من أن بيئة العمل جاهزة. الآن حان الوقت لكتابة أول برنامج TypeScript لك.

لا تقلق إذا لم تكن قد كتبت أي كود من قبل — سنبدأ من الصفر تماماً. لكن إذا كنت قد أكملت مسار JavaScript، فستجد الكثير مألوفاً.

في هذا الدليل العملي، سنأخذك خطوة بخطوة من كتابة أول سطر كود إلى تشغيله، مع تمارين وحلول لتثبيت المفاهيم.

لماذا نبدأ ببرنامج "Hello World"؟

برنامج "Hello World" هو تقليد قديم في عالم البرمجة. السبب في أهميته:

• يتحقق من أن بيئة العمل تعمل — إذا ظهرت الرسالة، فكل شيء جاهز.
• يعرّفك على بنية البرنامج — كيف يُكتب الكود وكيف يُشغّل.
• يعطيك إحساساً بالإنجاز — أول برنامج يعمل هو لحظة لا تُنسى.
• يبني الثقة — تنتقل من "لا أعرف شيئاً" إلى "أنا أبرمج".

الفرق بين JavaScript و TypeScript

قبل أن نكتب الكود، دعنا نلاحظ الفرق:

JavaScript:

const message = "مرحباً بالعالم!";
console.log(message);

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. اكتب فيه:

const message: string = "مرحباً بالعالم!";
console.log(message);

احفظ الملف بـ Ctrl + S.

⚠️ مهم: امتداد الملف يجب أن يكون .ts (وليس .js).

الخطوة 3: تحويل TypeScript إلى JavaScript

في Terminal، اكتب:

npx tsc

النتيجة: سيتم إنشاء ملف dist/hello.js يحتوي على:

"use strict";
const message = "مرحباً بالعالم!";
console.log(message);

لاحظ: : string اختفت! هذا لأن TypeScript تحولت إلى JavaScript عادية.

الخطوة 4: تشغيل البرنامج

node dist/hello.js

النتيجة المتوقعة:

مرحباً بالعالم!

🎉 مبروك! لقد كتبت وشغّلت أول برنامج TypeScript!

الخطوة 5: استخدام ts-node (الأسرع)

بدلاً من التحويل ثم التشغيل، استخدم ts-node:

npx ts-node src/hello.ts

النتيجة: نفس النتيجة، لكن بدون إنشاء ملف .js.

الطريقة الثانية: استخدام Watch Mode

بدلاً من تشغيل tsc يدوياً في كل مرة، استخدم:

npx tsc --watch

الآن أي تغيير في ملف .ts سيتم تحويله تلقائياً إلى .js.

⚠️ مهم: اترك Terminal مفتوحاً، وافتح Terminal آخر لتشغيل الكود.

فهم أنواع البيانات الأساسية

الآن بعد أن كتبت أول برنامج، دعنا نتعمق في الأنواع الأساسية.

1. string — النصوص

const name: string = "أحمد";
const greeting: string = `مرحباً ${name}`;

console.log(greeting);  // مرحباً أحمد

2. number — الأرقام

const age: number = 25;
const price: number = 99.99;
const temperature: number = -5;

console.log(age + price);

3. boolean — القيم المنطقية

const isStudent: boolean = true;
const isMarried: boolean = false;

if (isStudent) {
  console.log("أنت طالب");
}

4. any — أي نوع (تجنبه!)

let data: any = "نص";
data = 25;        // ✅ مسموح
data = true;      // ✅ مسموح
data = [1, 2, 3]; // ✅ مسموح

⚠️ تحذير: any يلغي فائدة TypeScript. تجنبه قدر الإمكان.

5. unknown — البديل الآمن لـ any

let data: unknown = "نص";
// console.log(data.toUpperCase());  // ❌ خطأ

if (typeof data === "string") {
  console.log(data.toUpperCase());  // ✅ يعمل
}

الفرق: unknown يطلب منك التحقق من النوع قبل الاستخدام.

6. void — لا قيمة مرجعة

function greet(): void {
  console.log("مرحباً");
}

7. never — لا يحدث أبداً

function throwError(message: string): never {
  throw new Error(message);
}

8. null و undefined

let nothing: null = null;
let notDefined: undefined = undefined;

⚠️ في TypeScript مع strict: true — null و undefined لهما أنواع خاصة.

أنواع المصفوفات والكائنات

1. المصفوفات

const numbers: number[] = [1, 2, 3, 4, 5];
const names: string[] = ["أحمد", "محمد", "علي"];
const mixed: (string | number)[] = ["أحمد", 25, "علي", 30];

2. الكائنات

const person: { name: string; age: number } = {
  name: "أحمد",
  age: 25,
};

console.log(person.name);
console.log(person.age);

3. Tuples — المصفوفات ذات الطول الثابت

const point: [number, number] = [10, 20];
const user: [string, number, boolean] = ["أحمد", 25, true];

الفائدة: تعرف مسبقاً عدد العناصر ونوعها.

الأنواع في الدوال

1. معاملات الدوال

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(5, 3));  // 8
// console.log(add("5", 3));  // ❌ خطأ

2. المعاملات الاختيارية

function greet(name: string, title?: string): string {
  if (title) {
    return `مرحباً ${title} ${name}`;
  }
  return `مرحباً ${name}`;
}

console.log(greet("أحمد"));            // مرحباً أحمد
console.log(greet("أحمد", "دكتور"));   // مرحباً دكتور أحمد

3. القيم الافتراضية

function greet(name: string = "زائر"): string {
  return `مرحباً ${name}`;
}

console.log(greet());         // مرحباً زائر
console.log(greet("أحمد"));   // مرحباً أحمد

4. الدوال السهمية

const add = (a: number, b: number): number => a + b;
const greet = (name: string): string => `مرحباً ${name}`;

مثال عملي: آلة حاسبة بسيطة

دعنا نبني آلة حاسبة صغيرة باستخدام 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)

الحل:

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: دالة حسابية

اكتب دالة تأخذ رقمين وترجع مجموعهما.

الحل:

function sum(a: number, b: number): number {
  return a + b;
}

console.log(sum(10, 20));  // 30

تمرين 3: مصفوفة أرقام

أنشئ مصفوفة أرقام، واطبع مجموعها.

الحل:

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)

الحل:

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، وترجع طوله/قيمته.

الحل:

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).

الحل:

const point: [number, number] = [10, 20];

console.log(`X: ${point[0]}, Y: ${point[1]}`);

حل المشاكل الشائعة

🔴 المشكلة 1: Type 'X' is not assignable to type 'Y'

السبب: حاولت تعيين قيمة بنوع مختلف عن المعلن.

let age: number = "25";  // ❌ خطأ

الحل:

let age: number = 25;  // ✅

🔴 المشكلة 2: Cannot find name 'X'

السبب: استخدمت متغيراً قبل تعريفه.

الحل: تأكد من تعريف المتغير قبل استخدامه.

🔴 المشكلة 3: Object is possibly 'null'

السبب: TypeScript تحذرك من قيمة قد تكون null.

function greet(name: string | null) {
  console.log(name.toUpperCase());  // ❌
}

الحل:

function greet(name: string | null) {
  if (name !== null) {
    console.log(name.toUpperCase());  // ✅
  }
}

🔴 المشكلة 4: Property 'X' does not exist on type 'Y'

السبب: حاولت الوصول لخاصية غير موجودة.

const person = { name: "أحمد", age: 25 };
console.log(person.email);  // ❌

الحل: تأكد من أن الخاصية موجودة في الكائن، أو أضفها للنوع.

🔴 المشكلة 5: tsc لا يجد الملفات

السبب: tsconfig.json غير مهيأ بشكل صحيح.

الحل: تأكد من "include": ["src/**/*"] و "rootDir": "./src".

جدول الأوامر الأساسية

الأمر	الوظيفة
npx tsc	تحويل كل ملفات TypeScript
npx tsc --watch	المراقبة التلقائية
npx ts-node file.ts	تشغيل TypeScript مباشرة
node dist/file.js	تشغيل JavaScript المُحوَّل
npx tsc --noEmit	فحص الأخطاء فقط (بدون تحويل)

قائمة تحقق نهائية

المهمة	الحالة
إنشاء ملف hello.ts	⬜
كتابة أول برنامج TypeScript	⬜
تحويله بـ tsc	⬜
تشغيله بـ node	⬜
استخدام ts-node	⬜
فهم الأنواع الأساسية	⬜
حل التمارين الستة	⬜

ماذا بعد هذا المقال؟

الآن بعد أن كتبت أول برنامج TypeScript، أنت جاهز للمقال التالي:

1. الأنواع الأساسية — تعمق في string، number، boolean...
2. الواجهات (Interfaces) — تعريف هياكل البيانات.
3. الدوال مع الأنواع — تعمق في أنواع الدوال.

الخلاصة

في هذا المقال، تعلمت:

• ✅ كيفية كتابة أول برنامج TypeScript.
• ✅ الفرق بين JavaScript و TypeScript.
• ✅ تحويل TypeScript إلى JavaScript.
• ✅ استخدام ts-node و --watch.
• ✅ الأنواع الأساسية: string, number, boolean, any, unknown, void, never.
• ✅ أنواع المصفوفات والكائنات.
• ✅ الأنواع في الدوال.

تذكر: البرمجة مهارة تُكتسب بالممارسة. لا تكتفِ بالقراءة — اكتب الكود بنفسك، وجرّب، وارتكب الأخطاء، وتعلم منها.

هل نجحت في تشغيل أول برنامج TypeScript؟ شاركنا في التعليقات!