الـ TypeScript

الهدف

بنهاية الدرس تحوّل ملف JavaScript لـ TypeScript، تضيف أنواعا (types) لكل parameter و return value، وتقرأ generic types من مكتبات بدون ما تخاف منها.

ليش هذا الحين؟

ترى وايد ناس يقولون TypeScript "معقد في البداية" — بس بعد أول أسبوع يستحيل يرجعون لـ JavaScript. السبب: TypeScript يمسك الخطأ قبل ما يصير. بدل ما تكتشف وقت التشغيل (runtime) إنك مررت undefined لـ function تتوقع string، الـ editor ينبهك فورا بخط أحمر. وللـ founders اللي يشتغلون بروحهم، هذا يوفّر ساعات debugging.

الفكرة

TypeScript = JavaScript + types.

كل كود JavaScript صالح في TypeScript. تضيف types تدريجيا — ما لازم تحوّل كل شي دفعة واحدة.

5 Features تغطي 90% من اللي تحتاجه:

1. الأنواع الأساسية (Basic Types):

const name: string = 'محمد'
const age: number = 25
const isActive: boolean = true
const tags: string[] = ['founder', 'builder']

2. الواجهات (Interfaces) — شكل الـ object:

interface User {
  id: string
  name: string
  email: string
  createdAt: Date
}

3. أسماء الأنواع (Type Aliases) — اسم لنوع:

type Status = 'active' | 'inactive' | 'pending'  // union type
type UserId = string  // alias بسيط

4. الحقول الاختيارية (Optional Fields):

interface Post {
  id: string
  title: string
  body?: string  // ← هذا optional — يمكن يكون undefined
}

5. الأنماط العامة (Generics) — قالب مرن:

// هذي الـ function تشتغل مع أي نوع
function first<T>(arr: T[]): T | undefined {
  return arr[0]
}

const num = first([1, 2, 3])   // TypeScript يعرف num هو number
const str = first(['a', 'b'])  // TypeScript يعرف str هو string

القاعدة الذهبية: لو TypeScript يشتكي، هو غالبا صح. ما تستخدم as any أو // @ts-ignore إلا كـ last resort. بدل جذي، افهم ليش يشتكي وأصلح المشكلة الحقيقية.