مقدمة في TypeScript – ليه نستخدمه وازاي نبدأ فيه؟

لو شغال بـ JavaScript بقالك فترة أكيد قابلت مشاكل بسبب الـ Dynamic Typing زي إنك تمرر بيانات غلط للـ function أو تنسى خاصية في object وتفضل تدور على الغلطة وقت كبير.. هنا بقا  بييجي دور TypeScript

ليه بنستخدم TypeScript بدل JavaScript؟ 

TypeScript هو superset من JavaScript يعني نفس الكود اللي بتكتبه في JS هيشتغل عادي في TS لكن مع مزايا إضافية هتحسن الشغل بشكل كبير:

• Type Safety– بيمنعك تستخدم أنواع غلط في المتغيرات والـ functions وده بيقلل الأخطاء بشكل كبير.
• Auto-completion & IntelliSense – بيخلي الـ IDE يفهم الكود أحسن ويقترح عليك المتغيرات والـ methods اللي تقدر تستخدمها.
• Better Debugging – الأخطاء بتظهر في مرحلة الكتابة مش وقت الـ runtime فـ TS هينبهك بالخطأ بدري.

هنبدأ مع أول خطوة: هنثبت TypeScript وننشئ اول مشروع:

قبل ما تبدأ اتأكد إن Node.js متسطب عندك. لو مش عندك نزل آخر إصدار من
لينك الموقع الرسمي لـ Node.JS

بعد كده، افتح الـ Terminal واكتب:

npm install -g typescript

كده TypeScript بقى جاهز على جهازك. وعشان نبدأ مشروع جديد:

mkdir my-ts-project && cd my-ts-project<br /><br /><br /><br /><br /><br /><br /><br /><br /> npm init -y

بعد كده هنضيف دعم TypeScript للمشروع:

npm install --save-dev typescript

وأخيرا هتعمل ملف جديد باسم index.ts (مش .js زي العادي) وابدأ فيه أول كود ليك.

هيكلية مشروع TypeScript:

لما تشتغل على مشروع بـ TypeScript هتلاقي شوية ملفات ومجلدات أساسية:

📂 src/ – هنا بتحط كل ملفات الكود المصدرية .ts
📂 dist/ – هنا بيتحط الكود بعد التحويل من TypeScript لـ JavaScript

📝 tsconfig.json – ملف الإعدادات اللي بيحدد طريقة الترجمة

ولو عاوز تنشئ ملف tsconfig.json هتستخدم:

tsc --init

ده هيعمل ملف الإعدادات تلقائي.

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

افتح ملف index.ts، وجرب الكود ده:

function sayHello(name: string): void {<br /> console.log(`أهلاً يا ${name}`);<br /> }<br /> sayHello("مجدي");

أهلاً يا مجدي

 

طيب إيه المختلف هنا عن JavaScript؟

📌 (name: string)– بيمنعك تستخدم أنواع غلط في المتغيرات والـ functions وده بيقلل الأخطاء بشكل كبير.

📌 (: void) – بيخلي الـ IDE يفهم الكود أحسن ويقترح عليك المتغيرات والـ methods اللي تقدر تستخدمها.

بعد كده عشان تحول الكود ده لـ JavaScript هتكتب:

tsc index.ts

هيتولد ملف index.js فيه الكود النهائي الجاهز للتشغيل.

التكاليف 🎯

📌التاسك

1️⃣ أنشئ ملف جديد باسم app.ts داخل مشروعك.

2️⃣ اكتب دالة printUserInfo تستقبل:

• اسم المستخدم (string)
• عمره (number)
• هل هو مسجل الدخول أم لا (boolean)

3️⃣ الدالة تطبع رسالة زي:

مرحباً يا مجدي عمرك 21 سنة. تسجيل الدخول: ✅

مرحباً يا سارة عمرك 50 سنة. تسجيل الدخول: ❌

4️⃣ استخدم TypeScript Compiler (tsc) لتحويل الملف لـ JavaScript وشغل الكود في Node.js.

📌 التحدي الإضافي:

جرب تمرر نوع خاطئ في واحد من المتغيرات (مثلا: مرر نص بدل رقم للعمر) وشوف TypeScript هيتصرف إزاي

وبكده نكون خلصنا أول بوست في سلسلة TypeScript  

النهارده اتكلمنا عن:

✅يعني إيه TypeScript وليه نستخدمه بدل JavaScript؟
✅ إزاي نسطبه ونبدأ مشروع بيه خطوة بخطوة؟
✅إزاي نكتب أول كود TypeScript ونحوله لـ JavaScript؟

لو عندك سؤال أو استفسار، اكتب في الكومنتات.👇