الفرق بين TypeScript و JavaScript مع أمثلة

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

type Product = { name: string; price: number };

function total(products: Product[]): number {
    return products.reduce((sum, p) => sum + p.price, 0);
}

const cart: Product[] = [
    { name: "Keyboard", price: 49 },
    { name: "Mouse", price: 25 },
];

console.log(total(cart)); // 74

في JavaScript تكون الدالة نفسها هي هذا الكود بعد حذف type Product = ... و: Product[] و: number. تضيف الأنواع معلومات للمترجم وللمحرر، لكنها لا تغيّر ما يفعله البرنامج.

مقارنة سريعة بين TypeScript و JavaScript

الكود نفسه باللغتين

إليك دالة مكتوبة بـ JavaScript. لا شيء فيها يحدد الشكل الذي يجب أن يكون عليه user:

function greeting(user) {
    return `Hello, ${user.firstName} ${user.lastName}`;
}

greeting({ firstname: "Ada", lastName: "Lovelace" });
// "Hello, undefined Lovelace", no error anywhere

تحدد نسخة TypeScript الشكل مرة واحدة، ويُبلَّغ عن الخطأ الإملائي قبل تشغيل الكود:

interface User {
    firstName: string;
    lastName: string;
}

function greeting(user: User): string {
    return `Hello, ${user.firstName} ${user.lastName}`;
}

greeting({ firstname: "Ada", lastName: "Lovelace" });
// error TS2561: Object literal may only specify known properties,
// but 'firstname' does not exist in type 'User'. Did you mean to write 'firstName'?

تعليقات الأنواع هي كل الفرق في الصياغة. تضيف TypeScript أيضًا بعض التصريحات الخاصة بها (interface وtype وenum، والأنواع العامة مثل Array<string>، ومحددات الوصول مثل private)، لكن الجمل والعوامل والكائنات المدمجة كلها من JavaScript.

ما تكتشفه TypeScript ولا تكتشفه JavaScript

تحوّل JavaScript الأنواع بصمت. هذا الخطأ شائع مع القيم القادمة من حقول النماذج، وهي نصوص دائمًا. شغّله لترى ما يقوله المترجم:

// This does not compile: strings where numbers are expected.
function sum(values: number[]): number {
    return values.reduce((a, b) => a + b, 0);
}

const fromForm = ["10", "20", "5"];
console.log(sum(fromForm));

index.ts(7,17): error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'number[]'.
  Type 'string' is not assignable to type 'number'.

في JavaScript يعمل هذا الكود ويطبع 010205، لأن 0 + "10" دمج نصوص. أما TypeScript فترفض الترجمة حتى تُحوَّل النصوص، مثلًا باستخدام fromForm.map(Number).

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

// This does not compile: find() can return undefined.
const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Grace" },
];

const user = users.find((u) => u.id === 3);
console.log(user.name.toUpperCase());

index.ts(8,13): error TS18048: 'user' is possibly 'undefined'.

نسخة JavaScript العادية تنهار وقت التشغيل بالخطأ TypeError: Cannot read properties of undefined (reading 'name'). والحل في TypeScript هو معالجة الحالة التي أشار إليها المترجم:

const users = [
    { id: 1, name: "Ada" },
    { id: 2, name: "Grace" },
];

for (const id of [2, 3]) {
    const user = users.find((u) => u.id === id);
    if (user) {
        console.log(user.name.toUpperCase()); // user is narrowed to the object type here
    } else {
        console.log(`no user with id ${id}`);
    }
}

الناتج:

GRACE
no user with id 3

ما لا تكتشفه TypeScript: الأخطاء المنطقية (المعادلة الخاطئة نوعها صحيح)، وأي شيء يتعلق ببيانات تدخل البرنامج وقت التشغيل. استجابة API نوعها User لا تكون صحيحة إلا بقدر صحة الخادم الذي أرسلها، لأن الأنواع تختفي حين يعمل الكود. افحص مثل هذه البيانات بكود يعمل وقت التشغيل.

استخدام مكتبات JavaScript في TypeScript

كل حزمة npm تعمل من TypeScript، لأن الناتج JavaScript في كل الأحوال. تأتي أنواع الحزمة من أحد ثلاثة مصادر:

• الحزمة تحتوي على ملفات .d.ts خاصة بها. معظم الحزم التي تُصان بنشاط تفعل ذلك، ولا تحتاج إلى تثبيت شيء إضافي.
• حزمة @types منفصلة من مشروع DefinitelyTyped المجتمعي: الأمر npm install --save-dev @types/lodash يضيف أنواع lodash.
• لا مصدر. عندها، مع تفعيل strict، يصبح الاستيراد نفسه خطأ:

error TS7016: Could not find a declaration file for module 'lodash'. '/project/node_modules/lodash/lodash.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`

الحل هو تثبيت حزمة @types إن وُجدت، أو وصف الوحدة بنفسك في ملف .d.ts؛ وتشرح صفحة ملفات التعريف كيف تفعل ذلك.

خطوة البناء

المتصفحات وNode.js لا تفحص الأنواع، لذلك تحتاج TypeScript إلى خطوة بين الكود المصدري والكود الذي يعمل. هناك ثلاثة إعدادات شائعة:

• tsc يترجم كل شيء. يفحص الأنواع ويكتب ملفات .js، عادة داخل مجلد dist. إعداد بسيط، وهو المعيار للمكتبات.
• أداة تجميع أو خادم تطوير يحذف الأنواع، وtsc --noEmit يفحصها. تحذف Vite وesbuild الأنواع دون فحصها، ما يبقي إعادة التحميل سريعة؛ ويشغّل المحرر وخطوة في CI فاحص الأنواع.
• بيئة التشغيل تحذف الأنواع. إصدارات Node.js الحالية وDeno وBun تشغّل ملفات .ts مباشرة. لا تفحص أي منها الأنواع أثناء التشغيل، لذلك يبقى tsc --noEmit (أو deno check) هو طريقة العثور على أخطاء الأنواع.

لا تحتاج JavaScript إلى أي من ذلك، وهذه أكبر ميزة عملية لها في السكربتات الصغيرة. تكلفة خطوة TypeScript هي في الغالب الإعداد، أي ملف tsconfig.json واعتمادية تطوير typescript، إضافة إلى وقت الترجمة؛ وقد خفّض المترجم الأصلي في TypeScript 7 هذا الوقت بنحو عشر مرات في المشاريع الكبيرة.

منحنى التعلم

كل ما تعرفه عن JavaScript ينتقل معك، لأن وقت تشغيل TypeScript هو JavaScript. الجديد هو نظام الأنواع، ويأتي على طبقات:

1. تعليقات الأنواع على المتغيرات والمعاملات والقيم المُعادة (: string و: number[]).
2. أنواع الكائنات باستخدام interface وtype، والخصائص الاختيارية، وunion مثل string | number.
3. التضييق: فحص القيمة بـ typeof أو in أو === حتى يعرف المترجم في أي حالة أنت.
4. الأنواع العامة، وأنواع الأدوات مثل Partial<T> وPick<T, K>، والأنواع المتقدمة لمؤلفي المكتبات.

تغطي الطبقتان الأوليان معظم كود التطبيقات. كثير من الأنواع يُستنتج تلقائيًا، لذلك يبدو جزء كبير من كود TypeScript مثل JavaScript مع أنواع على توقيعات الدوال فقط.

متى تختار TypeScript أو JavaScript

هل TypeScript أفضل من JavaScript؟ في الكود الذي يصونه عدة أشخاص أو يعيش سنوات، نعم في الغالب، وقد اتجهت الصناعة في هذا الاتجاه: بحسب عدد المساهمين الشهريين الذي يحسبه GitHub، تجاوزت TypeScript كلًا من JavaScript وPython في أغسطس 2025 لتصبح أكثر لغة مستخدمة على GitHub. أما في السكربتات الصغيرة، فغالبًا ما تكون JavaScript العادية الأداة الأنسب.

اختر TypeScript عندما:

• يعمل على الكود أكثر من شخص، أو سيُصان لأشهر أو سنوات.
• تكون قاعدة الكود كبيرة إلى حد لا تستطيع معه تذكر توقيع كل دالة.
• تعيد الهيكلة كثيرًا: إعادة تسمية خاصية تحدّث كل استخداماتها، ويسرد المترجم ما تبقى.
• تنشر مكتبة: تمنح ملفات .d.ts مستخدميها إكمالًا تلقائيًا وفحوصًا.
• يتوقعها إطار العمل. تطبيقات Angular تُكتب بـ TypeScript، وNext.js وAstro ينشئان المشاريع الجديدة بـ TypeScript افتراضيًا، وقوالب Vite لـ React وVue وSvelte يأتي كل منها بنسخة TypeScript.

اختر JavaScript عندما:

• يكون البرنامج سكربتًا قصيرًا، أو تجربة لمرة واحدة، أو مقتطف كود في وحدة تحكم المتصفح.
• تتعلم البرمجة لأول مرة وتريد مفاهيم أقل في الوقت نفسه.
• لا توجد خطوة بناء ولا تريد واحدة. وحتى عندها، يمنحك // @ts-check مع JSDoc بعض الفحص في ملف .js عادي.

ترحيل مشروع JavaScript إلى TypeScript

لا يلزم أن يحدث الترحيل دفعة واحدة. يقبل المترجم JavaScript بجانب TypeScript:

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": false,
        "outDir": "dist",
        "rootDir": "src"
    },
    "include": ["src"]
}

مع allowJs تُترجم ملفات .js ويمكنها الاستيراد من ملفات .ts والعكس. بعد ذلك حوّل تدريجيًا:

1. أعد تسمية ملف واحد من .js إلى .ts وأصلح الأخطاء التي يبلّغ عنها المترجم فيه.
2. ابدأ بالأطراف (وحدات الأدوات المساعدة ذات الاستيرادات القليلة)، ثم تقدّم نحو الداخل.
3. فعّل checkJs، أو أضف // @ts-check في أعلى ملفات .js بعينها، لفحص أنواع الملفات التي لم تُعد تسميتها بعد.

في ملفات JavaScript المفحوصة، توفر تعليقات JSDoc الأنواع:

// @ts-check

/**
 * @param {number} price
 * @param {number} qty
 * @returns {number}
 */
function lineTotal(price, qty) {
    return price * qty;
}

lineTotal("3", 2);
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

تتوقف بعض الفرق عند هذه النقطة: ملفات JavaScript مع أنواع JSDoc يفحصها tsc، دون خطوة بناء للكود نفسه. وتمضي فرق أخرى حتى النهاية إلى .ts. إذا فعّلت strict في مشروع قائم، فتوقع أخطاء كثيرة في البداية؛ وتسرد صفحة الوضع الصارم ما يفحصه كل خيار حتى تفعّل الخيارات واحدًا تلو الآخر.