TypeScript: مقدمة إلى TypeScript

تعد TypeScript «نسخة مطورة» من JavaScript — فهي تضيف ميزة التحقق من الأنواع إلى JavaScript، مما يتيح لك اكتشاف الأخطاء قبل تشغيل الكود.

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

1. ما ستتعلمه

• الأنواع الأساسية في TypeScript وتوضيحات الأنواع
• المفاهيم الأساسية مثل الواجهات، والأنواع العامة، وأسماء الأنواع البديلة
• استخدام الفئات والوحدات النمطية والزخارف في TypeScript
• الترحيل من مشروع JavaScript إلى TypeScript
• الممارسة الشاملة للمشاريع

2. ما هو TypeScript؟

TypeScript هي لغة برمجة مفتوحة المصدر طورتها شركة مايكروسوفت وأُطلقت لأول مرة في عام 2012. وهي مجموعة شاملة من JavaScript — بمعنى أن كل كود JavaScript صالح يُعد أيضًا كودًا صالحًا في TypeScript؛ ومع ذلك، تضيف TypeScript نظام أنواع إلى ذلك.

لنستخدم تشبيهًا: لغة جافا سكريبت تشبه ركوب الدراجة — يمكنك الوصول إلى وجهتك دون النظر إلى لافتات الشوارع، لكن من السهل أن تنحرف عن المسار الصحيح؛ أما لغة تايب سكريبت فهي تشبه ركوب الدراجة مع استخدام جهاز GPS — فهي ترشدك إلى أين تنعطف وأي الشوارع مسدودة قبل أن تنطلق حتى.

3. العلاقة بين TypeScript و JavaScript

لفهم العلاقة بين TS وJS، يكمن المفتاح في ثلاثة مصطلحات: المجموعة الفائقة، والتجميع، والتوافق.

(1) المجموعة الفائقة: كل ما هو موجود في TS موجود أيضًا في JS

سيعمل أي كود JavaScript بمجرد إدراجه مباشرةً في ملف .ts. لست بحاجة إلى تعلم لغة برمجة جديدة من الصفر — فـ TypeScript تُبنى على أساس JavaScript بدلاً من البدء من الصفر.

(2) التجميع: لا يمكن تشغيل TS مباشرةً في المتصفح

لا تدعم المتصفحات سوى لغة JavaScript، وليس TypeScript. ولذلك، يجب أولاً أن يقوم مُجمِّع TypeScript (tsc) بترجمة كود .ts الذي تكتبه إلى ملف .js قبل أن يتم تشغيله في متصفح أو في Node.js.

.ts Documents  →  TypeScript Compiler (tsc)  →  .js Documents  →  Browser/Node.js Run

تعد عملية التجميع هذه القيمة الأساسية لـ TypeScript — التحقق من أخطاء الأنواع في وقت التجميع، بدلاً من الانتظار حتى وقت التشغيل للإبلاغ عن الأخطاء.

(3) التوافق: يمكن ترحيل مشاريع JS الحالية بشكل تدريجي

يمكنك تغيير .js إلى .ts ملفًا تلو الآخر؛ فلا داعي لإعادة كتابة المشروع بأكمله دفعة واحدة. توفر الوثائق الرسمية لـ TypeScript الخيار allowJs، الذي يتيح لك دمج ملفات JavaScript ضمن مشروع TypeScript.

▶ مثال: استخدام كود JavaScript مباشرةً في TypeScript

// This is a standard JavaScript Code
function greet(name) {
  return "Hello, " + name;
}

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

لا يتطلب هذا الكود أي تعديلات؛ يمكنك ببساطة وضعه في الملف .ts وسيتم ترجمته بنجاح — لأن TypeScript يمثل مجموعة شاملة من JavaScript.

الناتج:

Hello, Charlie

4. لماذا نتعلم لغة TypeScript؟

إذا كنت تعرف لغة جافا سكريبت بالفعل، فلماذا تضيع وقتك في تعلم تايب سكريبت؟ أربع كلمات: الوقاية من الأخطاء وزيادة الكفاءة.

(1) يتم اكتشاف الأخطاء في مرحلة الترجمة بدلاً من أن تتسبب في تعطل البرنامج أثناء التشغيل

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

// JavaScript：No errors will occur，But the result was NaN
let price = "99";
let total = price * 2;  // NaN —— Strings cannot be multiplied.

سيكتشف TypeScript الأخطاء في مرحلة التحويل البرمجي:

// TypeScript：Compilation error，Immediate Reminder
let price: string = "99";
let total: number = price * 2;  // ❌ Error：string This type cannot be used in arithmetic operations.

(2) ميزة الإكمال التلقائي في المحرر تجعل عملية البرمجة أسرع

يوفر VS Code دعمًا جاهزًا للعمل مع TypeScript. فبينما تكتب اسم متغير، يقترح المحرر تلقائيًا الخصائص والطرق المتاحة، ويبرز أخطاء الأنواع في الوقت الفعلي — تمامًا كما لو كان هناك شريك بجانبك يساعدك على البقاء على المسار الصحيح.

(3) الكود هو وثيقة، مما يجعل التعاون بين أعضاء الفريق أكثر سلاسة

تعد تعليقات الأنواع في TypeScript أفضل شكل من أشكال التوثيق. فعندما ترى function getUser(id: number): User، تعرف على الفور أن المعلمة هي عدد وأن قيمة الإرجاع هي كائن من نوع User. ولا داعي لكتابة تعليقات إضافية — فالنوع نفسه يوضح كل شيء.

(4) اتجاهات القطاع: عامل إيجابي للعمالة

ابتداءً من الإصدار 2.0، تم تطوير Angular باستخدام TypeScript؛ كما أُعيدت كتابة Vue 3 بلغة TypeScript؛ وأصبح استخدام React مع TypeScript هو المعيار السائد؛ كما يدعم كل من Deno وBun لغة TypeScript بشكل أصلي. وفي إعلانات الوظائف المتعلقة بالواجهة الأمامية، تحولت «الإلمام بلغة TypeScript» من ميزة إضافية إلى متطلب أساسي.

▶ مثال: التحقق من الأنواع في TypeScript عمليًّا

// TypeScript Type errors will be caught at compile time
let age: number = 25;
age = "Twenty-six";  // ❌ Compilation Error：You cannot string Assign to number

// JavaScript The same code won't cause an error here.，But there might be problems during runtime.

الناتج:

// Executed successfully

5. سير عمل TypeScript

فيما يلي عملية التطوير الكاملة باستخدام TypeScript:

1. إنشاء ملف .ts — كتابة الكود بلغة TypeScript وإضافة تعليقات الأنواع
2. التجميع .ts → .js — التجميع باستخدام الأمر tsc؛ حيث يتحقق المُجمِّع من وجود أخطاء في الأنواع
3. تشغيل ملف .js — يمكن تشغيل كود جافا سكريبت المُجمَّع في أي بيئة

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  Write .ts    │ ──→ │  tsc Compilation    │ ──→ │  Run .js    │
│  Type Annotations    │     │  Type Checking    │     │  Browser/Node │
└──────────────┘     └──────────────┘     └──────────────┘

6. من ينبغي أن يتعلم لغة TypeScript

▶ مثال: TypeScript يضيف الأمان إلى JavaScript

الناتج:

8

// JavaScript — no type errors, but buggy
function add(a, b) {
  return a + b;       // "5" + 3 = "53" (string concatenation!)
}

// TypeScript — catches the bug at compile time
function addTyped(a: number, b: number): number {
  return a + b;       // always returns a number
}

console.log(addTyped(5, 3));       // 8
// addTyped("5", 3);              // ❌ Error: string not assignable to number

الناتج:

8

❓ أسئلة شائعة

📖 ملخص

• TypeScript هي مجموعة شاملة من JavaScript تضيف نظامًا للأنواع الثابتة
• يجب ترجمة كود TS إلى JS حتى يمكن تشغيله؛ وعملية الترجمة هي عملية التحقق من أنواع البيانات.
• القيمة الأساسية لـ TypeScript: الكشف عن الأخطاء في مرحلة التحويل البرمجي، وميزة الإكمال التلقائي في المحرر، و«الرمز كوثيقة»، واتجاهات الصناعة
• جميع أكواد جافا سكريبت هي بطبيعتها أكواد TypeScript صالحة
• قبل البدء في هذا الدرس التعليمي، يجب أن يكون لديك فهم أساسي لقواعد كتابة لغة جافا سكريبت.

📝 تمارين

1. سؤال أساسي (مستوى الصعوبة: ⭐): اشرح بعباراتك الخاصة الفروق الثلاثة الرئيسية بين TypeScript وJavaScript، ووصف فهمك لمصطلح «المجموعة الفائقة».
2. تمرين متقدم (درجة الصعوبة ⭐⭐): اكتب شفرة جافا سكريبت تحتوي على خطأ في النوع (مثل معاملة سلسلة نصية كرقم)، ثم اشرح كيف يكتشف TypeScript هذا الخطأ في مرحلة التحويل البرمجي.
3. التحدي (الصعوبة: ⭐⭐⭐): ابحث عن إطار عمل للواجهة الأمامية يثير اهتمامك (Angular / Vue / React)، واكتشف مدى دعمه لـ TypeScript، واكتب ملخصًا موجزًا.

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

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

من نحن