تعلم TypeScript للمبتدئين: دليل شامل لفهم TypeScript والفرق بينها وبين JavaScript

1. يعني إيه TypeScript؟

لماذا ظهرت TypeScript؟

JavaScript لغة Dynamic مرنة جدًا، وده بيخلي كتابة الكود سريعة، لكن في المشاريع الكبيرة المرونة دي بتسبب أخطاء خفية (مثلاً تبعت رقم لـ Function متوقعة نص). TypeScript ظهرت عشان تحل المشكلة دي عن طريق إجبار المطور يحدد أنواع البيانات (Types)، فلو حصل خطأ، الـ Editor ينبهك فورًا.

مثال بسيط

// في JavaScript
let username = "Ahmed";
username = 25; // عادي، مش هيطلع خطأ هنا، بس ممكن يضرب بعدين!

// في TypeScript
let username: string = "Ahmed";
// username = 25; // ❌ Error: Type 'number' is not assignable to type 'string'.

هنا TypeScript وقفتك وقالتلك: "أنت قولت إن المتغير ده نص (string)، إزاي بتحط فيه رقم؟". ده بيحميك من أخطاء كتير جداً في الـ Production.

2. الفرق بين JavaScript وTypeScript

جدول مقارنة شامل

3. هل TypeScript أفضل من JavaScript؟

متى تكون TypeScript مفيدة جدًا؟

• المشاريع الكبيرة (Enterprise): الكود بيكون ضخم ومحتاج تنظيم.
• فرق العمل (Teams): الـ Types بتعمل كـ Documentation للكود فالمطورين يفهموا بعض بسهولة.
• استخدام Frameworks حديثة: Angular مبنية بـ TypeScript، وReact وNext.js بيدعموها بشكل ممتاز.

متى تكون JavaScript كافية؟

• مشاريع صغيرة جداً أو Prototypes: محتاج تنجز بسرعة بدون إعدادات (Config).
• سكربتات سريعة: كود من 50-100 سطر لتنفيذ مهمة واحدة.
• في بداية التعلم: الأفضل تفهم JS الأول قبل ما تتعقد بـ Types.

4. إزاي أثبت TypeScript؟

الخطوات العملية

الخطوة 1: التأكد من Node.js
افتح الـ Terminal (أو CMD) واكتب:

node -v

لو طلعلك رقم إصدار، كمل. لو لأ، نزل Node.js من الموقع الرسمي.

الخطوة 2: تثبيت TypeScript
لتثبيتها Global (على جهازك كله):

npm install -g typescript

أو كـ Local Dependency (مفضلة في المشاريع، عشان كل مشروع يستخدم النسخة بتاعته):

npm install --save-dev typescript

الخطوة 3: التحقق من التثبيت

tsc -v

الأمر tsc هو اختصار لـ TypeScript Compiler، وده اللي بيحوّل الكود لـ JavaScript.

5. يعني إيه Type Annotation؟

أمثلة أساسية

// صيغة: let variableName: type = value;

let firstName: string = "Ahmed";
let age: number = 30;
let isDeveloper: boolean = true;
let skills: string[] = ["HTML", "CSS", "JS"]; // Array of strings

Type Inference (الاستنتاج الذكي)

مش لازم دايماً تكتب الـ Type بإيدك. TypeScript ذكية كفاية إنها تستنتج النوع من القيمة:

let country = "Egypt"; // TS فهمت فورًا إنها string
// country = 20; // ❌ Error

💡 نصيحة: استخدم Type Inference مع القيم البسيطة الواضحة، واستخدم Type Annotation لما تعرف متغير بدون قيمة أو مع الـ Functions والـ Objects المعقدة.

6. الفرق بين type و interface

باستخدام type

type UserType = {
  name: string;
  age: number;
};

// type قوي جداً مع Union
type Status = "success" | "error" | "loading";

باستخدام interface

interface UserInterface {
  name: string;
  age: number;
}

جدول المقارنة

💡 القاعدة البسيطة: لو بتوصف Object، ابدأ بـ interface. لو محتاج تركيبة معقدة أو Union، استخدم type.

7. يعني إيه Union Type؟

مثال

let productId: string | number;

productId = 101;      // ✅ شغال (رقم)
productId = "P-101";  // ✅ شغال (نص)
// productId = true;  // ❌ Error (ليست نص ولا رقم)

Type Narrowing (تضييق النوع)

لما تستخدم Union Type في Function، TS هترفض تنفذ عمليات معينة إلا لو اتأكدت من النوع. هنا بنستخدم typeof:

function displayId(id: string | number) {
  // console.log(id.toUpperCase()); // ❌ Error: لو رقم مش هينفع
  
  if (typeof id === "string") {
    // هنا TS اتأكدت إنه نص
    console.log(id.toUpperCase()); 
  } else {
    // هنا TS اتأكدت إنه رقم
    console.log(id * 2);
  }
}

8. يعني إيه Tuple؟

مثال

// تعريف Tuple (نص، ثم رقم)
let user: [string, number] = ["Ahmed", 25];

// user = [25, "Ahmed"]; // ❌ Error: الترتيب غلط
// user = ["Ahmed", 25, true]; // ❌ Error: الطول غلط

مقارنة: Array vs Tuple

💡 مثال شهير: في React، الـ Hook اللي اسمه useState بيرجع Tuple [state, setState].

9. يعني إيه Enum؟

مثال

enum Role {
  Admin,      // قيمته الافتراضية 0
  User,       // 1
  Guest       // 2
}

let myRole: Role = Role.Admin;
console.log(myRole); // 0

ممكن كمان تحدد القيم بنفسك (String Enum):

enum Status {
  Success = "SUCCESS",
  Error = "ERROR",
  Loading = "LOADING"
}

⚠️ ملاحظة: البعض يُفضل استخدام Union Types type Role = "Admin" | "User" بدلاً من Enums في المشاريع الحديثة لأنها أبسط ولا تُنتج كود JS إضافي، لكن Enums لا تزال شائعة جدًا.

10. يعني إيه Generic؟

المشكلة (بدون Generics)

لو عايز Function ترجع نفس القيمة اللي بتاخدها بس مش عارف النوع مقدماً:

// استخدمنا any، وده بيلغي فايدة TS!
function returnData(data: any): any {
  return data;
}

الحل (باستخدام Generics)

// T تُمثل Type وهمي هيتم تحديده وقت الاستدعاء
function returnData<T>(data: T): T {
  return data;
}

// وقت الاستدعاء
const stringResult = returnData<string>("Hello"); // TS عارفة إن النتيجة string
const numberResult = returnData<number>(100);    // TS عارفة إن النتيجة number

💡 Generics قوية جداً وتُستخدم بكثرة في الـ Arrays، مثل Array<string>.

11. إزاي أعمل Function بـ TypeScript؟

مثال كامل

// (a: number, b: number) -> المدخلات
// : number -> الـ Return Type المتوقع
function add(a: number, b: number): number {
  return a + b;
}

Optional Parameters (معاملات اختيارية)

استخدم علامة الاستفهام ? قبل النقطتين:

// message اختياري، return type هو void (مفيش إرجاع)
function logGreeting(name: string, message?: string): void {
  if (message) {
    console.log(name + ": " + message);
  } else {
    console.log("Hello, " + name);
  }
}

logGreeting("Ahmed"); // ✅ شغال
logGreeting("Ahmed", "Welcome!"); // ✅ شغال

12. ليه TypeScript بيطلع Error؟ (أشهر الأخطاء)

أشهر الأخطاء وكيفية حلها:

1. Type 'X' is not assignable to type 'Y'

السبب: بتحاول تحط نوع في نوع تاني.
الحل: اتأكد إن القيمة تتطابق مع النوع.

let score: number = 100;
// score = "high"; // ❌ Error: Type 'string' is not assignable to type 'number'

2. Property 'X' does not exist on type 'Y'

السبب: بتحاول تنادي على property أو method مش موجودة في النوع ده.

let user = { name: "Ahmed", age: 25 };
// console.log(user.email); // ❌ Error: Property 'email' does not exist...
// الحل: ضيف email للـ object أو استخدم Optional Chaining.

3. Object is possibly 'undefined' أو 'null'

السبب: TypeScript خايفة إن العنصر ميكونش موجود. (زي لما تبحث عن عنصر في الـ DOM).

const btn = document.querySelector(".my-btn");
// btn.addEventListener("click", () => {}); // ❌ Error: Object is possibly 'null'

// الحل: Type Narrowing أو Optional Chaining
if (btn) {
  btn.addEventListener("click", () => {}); // ✅
}

كيفية الـ Debugging

1. اقرأ الـ Error ببطء: TS رسائلها دقيقة جداً.
2. شوف السطر المذكور: بيشاور فين بالظبط.
3. تأكد من الـ Types: اسأل نفسك: TS كانت متوقعة إيه؟ وأنا اديتها إيه؟

13. يعني إيه string | number؟

let mixedData: string | number;

mixedData = "Hello"; // ✅
mixedData = 500;     // ✅
// mixedData = true; // ❌ Error

لما تستخدمه في Function، لازم تعمل Type Narrowing عشان تتعامل مع الخصائص الخاصة بكل نوع (زي toUpperCase للنصوص بس).

14. إزاي أعمل Compile لـ TypeScript؟

التحويل الأساسي لملف واحد

في الـ Terminal، لو عندك ملف اسمه app.ts:

tsc app.ts

الناتج هيكون ملف جديد اسمه app.js تقدر تربطه بـ HTML بتاعك.

استخدام tsconfig.json (للمشاريع)

في المشاريع، مش منطقي نعمل compile لكل ملف لوحده. بنعمل ملف إعدادات:

tsc --init

ده هينشئ ملف tsconfig.json. أهم الإعدادات جواه:

• target: إصدار JS اللي هيتم التحويل ليه (مثل ES6).
• rootDir: المجلد اللي فيه ملفات TS بتاعتك (مثل ./src).
• outDir: المجلد اللي هتتحط فيه ملفات JS الناتجة (مثل ./dist).
• strict: تفعيل الفحص الصارم للأنواع (مهم جداً).

بعد الإعدادات، ببساطة اكتب tsc في الـ Terminal، وهيحوّل كل المشروع.

15. الفرق بين ملف .ts و .js

💡 ملحوظة: لو نسخت كود من ملف .js وحطيته في .ts، هيشتغل غالباً بدون مشاكل، بس TS هتبدأ تطلب منك تحسينه بالتدريج.

مشروع TypeScript للمبتدئين: User Management

عشان نطبق اللي تعلمناه، هنعمل هيكل بسيط لـ User Management System يوضح استخدام الـ Types و Interfaces والـ Union.

// 1. تعريف Union Type للحالة
type Status = "active" | "inactive" | "banned";

// 2. تعريف Interface للمستخدم
interface User {
  id: number;
  name: string;
  email: string;
  status: Status;
  phone?: string; // Optional Parameter
}

// 3. تعريف Array من نوع User
let users: User[] = [];

// 4. Function لإضافة مستخدم جديد
function addUser(user: User): void {
  users.push(user);
  console.log(`User ${user.name} added successfully.`);
}

// 5. Function باستخدام Generic للبحث (بحث عام)
function findItem<T>(items: T[], filterFn: (item: T) => boolean): T | undefined {
  return items.find(filterFn);
}

// تجربة الكود
addUser({
  id: 1,
  name: "Ahmed",
  email: "[email protected]",
  status: "active"
  // phone اختياري فمفيش مشكلة إنه مش موجود
});

// بحث عن مستخدم
const foundUser = findItem(users, (u) => u.id === 1);
if (foundUser) {
  console.log("Found:", foundUser.name);
}

المفاهيم المستخدمة: Interface, Type Alias (Union), Array of Objects, Optional Properties, Generics, Functions مع Return Types.

ماذا أتعلم بعد TypeScript؟

الأسئلة الشائعة (FAQ)