ما هي TypeScript؟ مقدمة للمبتدئين مع أمثلة

TypeScript هي JavaScript مع أنواع ثابتة. تضيف تعليقات الأنواع إلى المتغيرات والمعاملات والقيم المُعادة، فيتحقق منها مترجم TypeScript قبل تشغيل البرنامج، ثم ينتج JavaScript عادية بعد حذف الأنواع. وتعمل هذه JavaScript في أي مكان تعمل فيه JavaScript: المتصفحات وNode.js وDeno وBun.

إليك برنامج TypeScript صغيرًا. اضغط Run.

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

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

الناتج:

Ada is 36 years old
82.33333333333333

باستثناء الأجزاء التي تأتي بعد النقطتين (: string و: User و: number[]) وتعريف interface، فهذا الكود JavaScript. تخبر هذه الإضافات المترجم بما يُسمح لكل قيمة أن تكونه. لاحظ أن total ليس له نوع مكتوب: تستنتج TypeScript وحدها أنه رقم. معظم كود TypeScript يكتب الأنواع عند حدود الدوال ويترك للمترجم استنتاج الباقي.

ما الذي يكتشفه فاحص الأنواع

الغرض من تعليقات الأنواع أن تظهر الأخطاء أثناء كتابة الكود بدل أن يصادفها المستخدم. شغّل هذا المثال واقرأ الناتج:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

لا يبدأ البرنامج أبدًا. بدلًا من ذلك يطبع المترجم خطأين:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

يذكر كل خطأ اسم الملف والسطر والعمود ورمز الخطأ (TS2322) ووصف المشكلة. في JavaScript العادية كان السطران سيعملان، وكان الثاني سيطبع Linus is undefined years old دون أي تحذير. وفي محرر مثل VS Code تظهر الأخطاء نفسها كخطوط حمراء أثناء الكتابة، مع إكمال تلقائي يعرف أن user يملك بالضبط name وage.

أخطاء نموذجية يكتشفها الفاحص:

• خطأ إملائي في اسم خاصية أو دالة (user.nmae وlist.lenght).
• استدعاء دالة بعدد وسائط أقل أو أكثر من اللازم، أو بوسائط من نوع خاطئ.
• استخدام قيمة قد تكون null أو undefined دون التحقق منها أولًا.
• نسيان معالجة إحدى حالات union مثل "loading" | "done" | "error"، عندما يستخدم الكود فحصًا شاملًا.
• كود يتعطل عندما تتغير توقيعات دالة تعتمد عليها.

الأنواع تختفي وقت التشغيل

أنواع TypeScript موجودة وقت الترجمة فقط. يتحقق منها المترجم ثم يحذفها: ملف JavaScript الناتج لا يحتوي على تعليقات أنواع ولا على interfaces، ويعمل تمامًا مثل JavaScript كتبتها بيدك.

هذا المدخل:

function double(n: number): number {
    return n * 2;
}

يصبح هذا الناتج:

function double(n) {
    return n * 2;
}

لذلك لا تستطيع TypeScript التحقق من القيم التي تصل أثناء تشغيل البرنامج. هنا يدّعي نص JSON أنه User، ويضطر المترجم إلى تصديق هذا الادعاء، ولا يعترض شيء وقت التشغيل أيضًا:

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

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

الناتج:

string
thirty-six1

البيانات القادمة من خارج البرنامج (استجابات API ومدخلات النماذج والملفات) تحتاج إلى فحص وقت التشغيل، مثل دالة type guard تفحص القيمة. عندها تثق TypeScript بهذا الفحص وتضيّق النوع لك.

من أنشأ TypeScript ولماذا

أُنشئت TypeScript في Microsoft، وقاد تصميمها Anders Hejlsberg (مصمم C#). صدرت للعامة في أكتوبر 2012 بالإصدار 0.8، وتلاها الإصدار 1.0 في أبريل 2014. وهي مفتوحة المصدر بترخيص Apache 2.0 وتُطوَّر على GitHub. وبحسب عدد المساهمين الشهريين الذي يحسبه GitHub، أصبحت TypeScript في أغسطس 2025 أكثر لغة مستخدمة على GitHub، متقدمة على Python وJavaScript.

كان الدافع هو قواعد كود JavaScript الكبيرة. لا تملك JavaScript طريقة لقول «هذه الدالة تستقبل كائن مستخدم»، لذلك كانت إعادة تسمية خاصية أو تغيير دالة تعني البحث في كامل قاعدة الكود والأمل في أن تغطي الاختبارات كل من يستدعيها. تضيف TypeScript هذه المعلومة بطريقة تحافظ على التوافق الكامل مع JavaScript:

• إنها مجموعة شاملة. كود JavaScript الصحيح هو صياغة TypeScript صحيحة، لذلك يستطيع المشروع التحول ملفًا بعد ملف.
• إنها تتبع JavaScript. باستثناء إضافات مبكرة قليلة مثل enum وnamespace، لا تضيف TypeScript ميزات خاصة بها وقت التشغيل؛ الصياغة الجديدة تأتي من معيار JavaScript.
• الأنواع لا تكلف شيئًا وقت التشغيل. إنها تُمحى، فيكون الناتج بسرعة JavaScript المكتوبة يدويًا.

الإصدار الرئيسي الحالي هو TypeScript 7، الذي أُعيدت كتابة مترجمه بلغة Go كبرنامج أصلي، ويفحص أنواع المشاريع الكبيرة أسرع بنحو عشر مرات من المترجم المبني على JavaScript الذي حلّ محله. تشرح صفحة TypeScript 7 ما الذي تغيّر.

فيمَ تُستخدم TypeScript؟ الواجهة الأمامية والخلفية

تُستخدم TypeScript لبناء البرمجيات نفسها التي تُبنى بـ JavaScript، في الواجهة الأمامية والخلفية معًا. ولأن الناتج JavaScript، فإن TypeScript تذهب حيثما تذهب JavaScript:

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

كيف يتحول كود TypeScript إلى JavaScript

هناك مهمتان منفصلتان، وتقوم بكل منهما أدوات مختلفة:

1. فحص الأنواع. لا يقوم بهذا إلا مترجم TypeScript، وعادة عبر الأمر tsc (الأمر deno check في Deno يشغّل نسخة من المترجم نفسه). يقرأ ملفات .ts، ويبلّغ عن الأخطاء، ويكتب افتراضيًا ملفات .js أيضًا.
2. حذف الأنواع. يستطيع tsc القيام بذلك، وكذلك أدوات أسرع تتخطى فحص الأنواع كليًا: esbuild وSWC وBabel، وحذف الأنواع المدمج في Node.js وDeno وBun.

إعداد شائع يستخدم أداة سريعة لتشغيل الكود، وtsc --noEmit (فحص فقط دون كتابة أي ملف) في المحرر وفي CI. لتثبيت tsc ولتشغيل ملف .ts صفحة خاصة بكل منهما في هذا الفصل.

الميزات الأساسية في مثال واحد

تستخدم TypeScript اليومية مجموعة صغيرة من الميزات. يجمع هذا المثال أهمها:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

الناتج:

Ada ada@example.com
Ada can log in
Linus is banned

• تعليقات الأنواع (name: string) تحدد ما يحمله متغير أو معامل أو خاصية أو قيمة مُعادة.
• استنتاج الأنواع يملأ الأنواع التي تتركها: يأخذ account نوعه مما تعيده first.
• الواجهات وأسماء الأنواع المستعارة (interface Account وtype Status) تعطي أسماء لشكل بياناتك.
• أنواع union ("active" | "banned" وT | undefined) تصف قيمة هي واحد من عدة أشياء.
• التضييق (Narrowing): بعد فحص مثل account !== undefined يعرف المترجم أي حالة تنطبق داخل الكتلة.
• الخصائص الاختيارية (email?: string) قد تكون غائبة، لذلك يتضمن نوعها undefined.
• الأنواع العامة (Generics) (first<T>) تتيح لدالة أو نوع واحد العمل مع أنواع كثيرة مع إبقائها مترابطة: مصفوفة من Account تدخل، وAccount يخرج.

هل تحتاج إلى تعلم JavaScript أولًا؟

هذا يساعد، لكن يمكنك تعلم اللغتين معًا. كل ما يتعلق بسلوك كود TypeScript وقت التشغيل (المتغيرات والدوال والكائنات والمصفوفات والوعود والأصناف) هو JavaScript، وتضيف TypeScript طبقة تصف هذه القيم. إذا كنت تعرف JavaScript فالجديد عليك هو نظام الأنواع: التعليقات والواجهات وunion والأنواع العامة والتضييق. وإذا كنت جديدًا على الاثنتين، فابدأ بأساسيات قيم JavaScript ودوالها، ثم أضف الأنواع تدريجيًا؛ رسائل أخطاء المترجم معلّم جيد، لأنها تشير إلى السطر الذي استُخدمت فيه قيمة بطريقة خاطئة.

ترتيب عملي لتعلم TypeScript: ثبّتها وشغّل أول ملف، ثم تعلّم الأنواع الأساسية وأنواع الكائنات، ثم أنواع union والتضييق، وبعد ذلك الدوال والأنواع العامة. هذا يغطي معظم كود التطبيقات.