TypeScript/Guide

يُشار إلى TypeScript على أنّها مجموعة عليا (superset) من JavaScript وتُترجم (compile) إليها. وهذا يعني بأن البرامج المكتوبة بلغة JavaScript هي برامج TypeScript صالحة كذلك، ولأنّها تُترجم إلى لغة JavaScript عاديّة، فيُمكن كتابة برامج بلغة TypeScript وترجمتها وتشغيلها في أي مكان يقبل تشغيل برمجيات JavaScript مثل المتصفّح، أو منصّة Node.js، أو أي مُحرّكٍ (engine) يدعم الإصدار ECMAScript 3 من لغة JavaScript أو أي إصدار أحدث منه.

تدعم TypeScript مزايا JavaScript الجديدة والتي قيد التطوير، ما يشمل مزايا الإصدار ECMAScript 2015 والاقتراحات المستقبلية، مثل الدوال غير المتزامنة (async functions) والمزخرفات (decorators) للمساعدة على بناء مكونات قوية. وهذه المزايا متوفرة للمطور عند البرمجة محليا لتوفير تجربة مطور محسّنة وسلسلة، لكنّها تُترجم إلى لغة JavaScript بسيطة تستهدف بيئات ECMAScript 3 (أو أحدث من ذلك) لدعم المتصفحات التي لا تدعم مزايا النسخ الجديدة.

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

تثبيت TypeScript

يُمكن تنصيب المُترجم (compiler) الذي يُترجم TypeScript إلى لغة JavaScript باستخدام مدير الحزم npm بالأمر التالي:

npm install -g typescript

قد تحتاج إلى امتيازات المدير إن كنت على نظام لينكس أو نظام Mac:

sudo npm install -g typescript

أو يُمكن استعمال أحد الإضافات التالية لبيئة التطوير الخاصة بك إن لم تكن تدعم اللغة افتراضيًا (التحديث الثالث من Visual Studio 2015 وVisual Studio 2017 يشمل دعمًا افتراضيًا):

• Visual Studio 2015
• Visual Studio 2017

أو يُمكنك استعمال محرر مثل Visual Studio Code أو غيره من المحررات التي تدعم اللغة.

إن كنت تستعمل أحد المحررات الأخرى أو بيئات تطوير غير Visual Studio، فإليك روابط لإضافة دعم TypeScript:

• Sublime Text
• Atom
• Eclipse
• Emacs
• WebStorm
• Vim

بناء أول تطبيق TypeScript خاص بك

افتح ملفًّا باسم greeter.ts في مُحرّرك واكتب فيه شيفرة JavaScript التالية:

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

ترجمة (Compiling) الشيفرة

استعملنا امتداد ‎.ts‎ للملف، لكن الشيفرة أعلاه مُجرّد شيفرة JavaScript عادية. ويُمكن أن تنسخها أو تلصقها على تطبيق JavaScript عادي.

على سطر الأوامر، استعمل مُترجم TypeScript لترجمة الشيفرة:

tsc greeter.ts

سينتج ملف باسم greeter.js‎ يحتوي على نفس شيفرة JavaScript التي أدخلناها. هذا يعني بأننا قد تمكنا من استخدام TypeScript على تطبيق JavaScript الخاص بنا!

يُمكننا الآن استعمال المزايا والأدوات الإضافية التي توفرها TypeScript. أضف حاشية النوع ‎: string‎ ‎ إلى المُعامل person في الدالة كما هو موضح هنا:

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

حواشي الأنواع (Type annotations)

حواشي الأنواع في TypeScript هي طرق بسيطة لتسجيل نية استعمال الدالة أو المتغير. في هذه الحالة، ننوي من الدالة greeter أن تُستدعى بمعامل واحد يُمثل سلسلة نصية (string)، يُمكننا محاولة تغيير استدعاء الدالة لنمرر لها مصفوفةً (array) عوضًا عن سلسلة نصيّة كما هو محدد للمعامل:

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

عند إعادة الترجمة، ستُلاحظ الخطأ التالي:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

بنفس الطريقة، حاول استدعاء الدالة greeter دون تمرير أي معامل لها. ستلاحظ بأن TypeScript ستُخبرك بأنك استدعيت الدالة بعدد غير متوقع من المعاملات. في كلتا الحالتين، تستطيع TypeScript توفير تحليل ساكن (static analysis) بناءً على كل من بنية الشيفرة الخاصة بك، وحواشي الأنواع التي تُوفّرها في الشيفرة.

لاحظ أن الملف greeter.js‎ يُنشَأُ رغم وجود الأخطاء. يُمكنك استعمال TypeScript حتى ولو وُجدَت أخطاء في شيفرتك. لكن في هذه الحالة، تُنبه TypeScript إلى أن شيفرتك قد لا تعمل كالمتوقع.

الواجهات (Interfaces)

لنكمل تطوير تطبيقنا. نستعمل هنا واجهة لوصف الكائنات التي تملك حقلي firstName وlastName. في TypeScript، يكون نوعان متوافقان إن كانت البنية الداخلية (internal structure) الخاصة بهما متوافقة. يسمح لنا هذا بإنشاء واجهة عبر استخدام الشكل الذي تتطلبه الواجهة فقط، دون الحاجة إلى عبارة implements.

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

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

الأصناف (Classes)

أخيرًا، لنُوسّع المثال باستخدام ميزة الأصناف. وتدعم TypeScript الميزات الجديدة من JavaScript، مثل دعم البرمجة كائنية التوجه المعتمدة على الأصناف (class-based object-oriented programming).

سنُنشئ صنفًا باسم Student مع دالة بانية (constructor) وبضع حقول عامّة (public fields). لاحظ أن الواجهات والأصناف تعمل مع بعضها البعض بتناسق، ما يسمح للمبرمج بتقرير مستوى التجريد (level of abstraction).

لاحظ أيضًا أن استعمال الكلمة المفتاحية public مع معاملات الدالة البانية طريقةٌ موجزة تسمح لنا بإنشاء الخاصيات (properties) ذات نفس الاسم تلقائيّا.

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

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

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

أعد تنفيذ الأمر tsc greeter.ts وسترى أن شيفرة JavaScript المُولَّدة هي نفسها الشيفرة أعلاه. الأصناف في TypeScript مجرد طريقة موجزة للبرمجة كائنية التوجه المعتمدة على سلسلة Prototype التي تُستعمل كثيرًا في JavaScript.

تشغيل تطبيق الويب المكتوب بلغة TypeScript

اكتب الآن ما يلي في ملفٍّ باسم greeter.html:

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

افتح greeter.html بالمتصفح لتشغيل أول تطبيق ويب كتبتَه بلغة TypeScript!

اختياريًّا: افتح greeter.ts في Visual Studio أو انسخ الشيفرة إلى منصة تجريب TypeScript. يُمكنك تمرير مؤشر الفأرة على المعرفات لرؤية أنواعها. لاحظ أن هذه الأنواع تكون في بعض الأحيان مستنتجَةً تلقائيًّا. أعد كتابة آخر سطر ولاحظ قائمة اقتراحات للإكمال ومساعدة على استعمال المعاملات اعتمادًا على أنواع عناصر DOM. ضع مؤشر الفأرة على مرجع الدالة greeter، واضغط على الزر F12 للوصول إلى تعريفها. لاحظ كذلك أنك تستطيع الضغط بالزر الأيمن على رمز واستعمال إعادة التصنيع (refactoring) لإعادة تسميته.

معلومات الأنواع المتوفرة تعمل مع الأدوات التي تعمل مع JavaScript عند تطوير التطبيقات. للمزيد عن لغة TypeScript، اطلع على صفحات التوثيق الأخرى.

مصادر

• صفحة TypeScript in 5 minutes في توثيق TypeScript الرسمي.