مقدمة إلى TypeScript

ما هو TypeScript؟

TypeScript هي لغة برمجة مكتوبة بقوة (strongly typed) مبنية على JavaScript، تمنحك أدوات أفضل على أي نطاق. تم تطويرها وصيانتها بواسطة Microsoft، وهي مجموعة فوقية (superset) من JavaScript، مما يعني أن أي كود JavaScript صالح هو أيضاً كود TypeScript صالح. ومع ذلك، تضيف TypeScript الكتابة الثابتة الاختيارية (optional static typing)، والفئات (classes)، والواجهات (interfaces)، والعديد من الميزات الأخرى التي تساعد المطورين على كتابة كود أكثر قوة وقابلية للصيانة.

لماذا نستخدم TypeScript؟

1. فحص النوع الثابت (Static Type Checking)

يلتقط TypeScript الأخطاء المتعلقة بالأنواع أثناء التطوير، قبل تشغيل الكود. وهذا يعني أنه يمكنك العثور على الأخطاء في وقت مبكر من عملية التطوير:

// JavaScript - لا خطأ حتى وقت التشغيل
function greet(person) {
    return "Hello, " + person.name;
}

greet("John"); // Runtime Error: Cannot read property 'name' of undefined

// TypeScript - يتم اكتشاف الخطأ أثناء التطوير
function greet(person: { name: string }) {
    return "Hello, " + person.name;
}

greet("John"); // Compile Error: Argument of type 'string' is not assignable

2. دعم محسّن لبيئة التطوير المتكاملة (IDE)

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

3. توثيق أفضل للكود

تعمل تعليقات النوع (type annotations) كتوثيق مضمّن لا يتعارض أبداً مع الكود الخاص بك. عندما ترى توقيع الدالة (function signature)، تعرف على الفور أنواع الوسائط التي تتوقعها وما تُرجعه.

// توقيع دالة موثق ذاتياً
function calculateDiscount(
    price: number,
    discountPercent: number,
    applyTax: boolean = true
): number {
    let discounted = price * (1 - discountPercent / 100);
    return applyTax ? discounted * 1.1 : discounted;
}

4. إعادة هيكلة أسهل (Easier Refactoring)

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

5. الوصول إلى ميزات JavaScript الحديثة

يدعم TypeScript أحدث ميزات JavaScript (ES2015+) ويسمح لك باستخدامها حتى إذا كنت بحاجة إلى استهداف متصفحات أقدم. سيقوم المترجم بنقل بناء الجملة الحديث إلى كود يعمل في بيئتك المستهدفة.

TypeScript مقابل JavaScript

إعداد بيئة TypeScript

المتطلبات الأساسية

قبل تثبيت TypeScript، تحتاج إلى تثبيت Node.js و npm (Node Package Manager) على جهاز الكمبيوتر الخاص بك. يمكنك تنزيل Node.js من nodejs.org. يأتي مدير الحزم npm مع Node.js.

// تحقق مما إذا كان Node.js مثبتاً
node --version

// تحقق مما إذا كان npm مثبتاً
npm --version

تثبيت TypeScript

هناك طريقتان رئيسيتان لتثبيت TypeScript:

1. التثبيت العالمي (موصى به للتعلم)

يقوم هذا بتثبيت TypeScript عالمياً على نظامك، مما يجعل الأمر tsc (TypeScript Compiler) متاحاً في كل مكان:

npm install -g typescript

// تحقق من التثبيت
tsc --version

2. التثبيت المحلي (موصى به للمشاريع)

يقوم هذا بتثبيت TypeScript كتبعية تطوير في مشروعك:

// تهيئة مشروع npm جديد
npm init -y

// تثبيت TypeScript محلياً
npm install --save-dev typescript

// تحقق من التثبيت
npx tsc --version

ملف TypeScript الأول الخاص بك

لنقم بإنشاء ملف TypeScript بسيط وتجميعه:

الخطوة 1: أنشئ ملفاً باسم hello.ts:

// hello.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}

const message = greet("TypeScript");
console.log(message);

الخطوة 2: قم بتجميع ملف TypeScript:

tsc hello.ts

الخطوة 3: ينشئ هذا ملف hello.js:

// hello.js (generated)
function greet(name) {
    return "Hello, " + name + "!";
}
var message = greet("TypeScript");
console.log(message);

الخطوة 4: قم بتشغيل ملف JavaScript:

node hello.js
// Output: Hello, TypeScript!

إعداد مشروع TypeScript

للمشاريع الأكبر، ستحتاج إلى إنشاء بنية مشروع مناسبة مع ملف تكوين:

// أنشئ دليل مشروع جديد
mkdir my-typescript-project
cd my-typescript-project

// تهيئة npm
npm init -y

// تثبيت TypeScript
npm install --save-dev typescript

// أنشئ ملف تكوين TypeScript
npx tsc --init

ينشئ هذا ملف tsconfig.json بالعديد من الخيارات المُعلَّقة. سنستكشف هذا الملف بالتفصيل في الدرس التالي.

بنية المشروع الموصى بها

my-typescript-project/
├── src/              # ملفات مصدر TypeScript
│   └── index.ts
├── dist/             # ملفات JavaScript المُجمَّعة
├── node_modules/     # التبعيات
├── package.json      # بيانات تعريف المشروع
└── tsconfig.json     # تكوين TypeScript

وضع المراقبة (Watch Mode)

أثناء التطوير، يمكنك استخدام وضع المراقبة لإعادة تجميع الملفات تلقائياً عند تغييرها:

// راقب ملفاً واحداً
tsc hello.ts --watch

// راقب جميع الملفات في مشروع
tsc --watch

ملعب TypeScript

قبل إعداد بيئة محلية، يمكنك تجربة TypeScript في الملعب الرسمي عبر الإنترنت على typescriptlang.org/play. هذا مثالي لتجربة مقتطفات الكود الصغيرة ورؤية كيف يترجم TypeScript إلى JavaScript.

الملخص

• TypeScript هي مجموعة فوقية من JavaScript تضيف الكتابة الثابتة وميزات قوية أخرى
• يلتقط الأخطاء أثناء التطوير بدلاً من وقت التشغيل
• يجب تجميع كود TypeScript إلى JavaScript قبل أن يتمكن من التشغيل
• يوفر TypeScript دعماً أفضل لـ IDE، وإعادة هيكلة أسهل، وكود موثق ذاتياً
• يمكنك تثبيت TypeScript عالمياً أو محلياً في مشاريعك
• يجمع الأمر tsc ملفات TypeScript إلى JavaScript
• كل ملف JavaScript هو بالفعل TypeScript صالح - يمكنك اعتماد TypeScript تدريجياً