عرض مصدر TypeScript/Guide

<noinclude>{{DISPLAYTITLE:مدخل إلى TypeScript}}</noinclude>
يُشار إلى 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 بالأمر التالي:
<syntaxhighlight lang="typescript">
npm install -g typescript
</syntaxhighlight>
قد تحتاج إلى امتيازات المدير إن كنت على نظام لينكس أو نظام Mac:
<syntaxhighlight lang="typescript">
sudo npm install -g typescript
</syntaxhighlight>
أو يُمكن استعمال أحد الإضافات التالية لبيئة التطوير الخاصة بك إن لم تكن تدعم اللغة افتراضيًا (التحديث الثالث من Visual Studio 2015 وVisual Studio 2017 يشمل دعمًا افتراضيًا):
* [https://www.microsoft.com/en-us/download/details.aspx?id=48593 Visual Studio 2015]
* [https://www.microsoft.com/en-us/download/details.aspx?id=55258 Visual Studio 2017]

أو يُمكنك استعمال محرر مثل [https://code.visualstudio.com Visual Studio Code] أو غيره من المحررات التي تدعم اللغة.

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

* [https://github.com/Microsoft/TypeScript-Sublime-Plugin Sublime Text]
* [https://atom.io/packages/atom-typescript Atom]
* [https://github.com/palantir/eclipse-typescript Eclipse]
* [https://github.com/ananthakumaran/tide Emacs]
* [https://www.jetbrains.com/webstorm WebStorm]
* [https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support#vim Vim]

==بناء أول تطبيق TypeScript خاص بك==
افتح ملفًّا باسم <code>greeter.ts</code> في مُحرّرك واكتب فيه شيفرة JavaScript التالية:
<syntaxhighlight lang="typescript">
function greeter(person) {

return "Hello, " + person;

}

let user = "Jane User";

document.body.innerHTML = greeter(user);
</syntaxhighlight>
===ترجمة (Compiling) الشيفرة===
استعملنا امتداد ‎<code>.ts</code>‎ للملف، لكن الشيفرة أعلاه مُجرّد شيفرة JavaScript عادية. ويُمكن أن تنسخها أو تلصقها على تطبيق JavaScript عادي.

على سطر الأوامر، استعمل مُترجم TypeScript لترجمة الشيفرة:
<syntaxhighlight lang="typescript">
tsc greeter.ts
</syntaxhighlight>

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

يُمكننا الآن استعمال المزايا والأدوات الإضافية التي توفرها TypeScript. أضف حاشية النوع <code>‎: string</code>‎ ‎ إلى المُعامل <code>person</code> في الدالة كما هو موضح هنا:
<syntaxhighlight lang="typescript">
function greeter(person: string) {

return "Hello, " + person;

}

let user = "Jane User";

document.body.innerHTML = greeter(user);
</syntaxhighlight>

===حواشي الأنواع (Type annotations)===
حواشي الأنواع في TypeScript هي طرق بسيطة لتسجيل نية استعمال الدالة أو المتغير. في هذه الحالة، ننوي من الدالة greeter أن تُستدعى بمعامل واحد يُمثل سلسلة نصية (string)، يُمكننا محاولة تغيير استدعاء الدالة لنمرر لها مصفوفةً (array) عوضًا عن سلسلة نصيّة كما هو محدد للمعامل:
<syntaxhighlight lang="typescript">
function greeter(person: string) {

return "Hello, " + person;

}

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);
</syntaxhighlight>عند إعادة الترجمة، ستُلاحظ الخطأ التالي:
 error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
بنفس الطريقة، حاول استدعاء الدالة <code>greeter</code> دون تمرير أي معامل لها. ستلاحظ بأن TypeScript ستُخبرك بأنك استدعيت الدالة بعدد غير متوقع من المعاملات. في كلتا الحالتين، تستطيع TypeScript توفير تحليل ساكن (static analysis) بناءً على كل من بنية الشيفرة الخاصة بك، وحواشي الأنواع التي تُوفّرها في الشيفرة.

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

===الواجهات (Interfaces)===
لنكمل تطوير تطبيقنا. نستعمل هنا واجهة لوصف الكائنات التي تملك حقلي <code>firstName</code> و<code>lastName</code>. في TypeScript، يكون نوعان متوافقان إن كانت البنية الداخلية (internal structure) الخاصة بهما متوافقة. يسمح لنا هذا بإنشاء واجهة عبر استخدام الشكل الذي تتطلبه الواجهة فقط، دون الحاجة إلى عبارة <code>implements</code>.<syntaxhighlight lang="typescript">
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);
</syntaxhighlight>

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

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

لاحظ أيضًا أن استعمال الكلمة المفتاحية <code>public</code> مع معاملات الدالة البانية طريقةٌ موجزة تسمح لنا بإنشاء الخاصيات (properties) ذات نفس الاسم تلقائيّا.<syntaxhighlight lang="typescript">
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);
</syntaxhighlight>

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

===تشغيل تطبيق الويب المكتوب بلغة TypeScript===
اكتب الآن ما يلي في ملفٍّ باسم greeter.html:<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>

<head><title>TypeScript Greeter</title></head>

<body>

<script src="greeter.js"></script>

</body>

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

'''اختياريًّا:''' افتح <code>greeter.ts</code> في Visual Studio أو انسخ الشيفرة إلى [https://www.typescriptlang.org/play/index.html منصة تجريب TypeScript]. يُمكنك تمرير مؤشر الفأرة على المعرفات لرؤية أنواعها. لاحظ أن هذه الأنواع تكون في بعض الأحيان مستنتجَةً تلقائيًّا. أعد كتابة آخر سطر ولاحظ قائمة اقتراحات للإكمال ومساعدة على استعمال المعاملات اعتمادًا على أنواع عناصر DOM. ضع مؤشر الفأرة على مرجع الدالة <code>greeter</code>، واضغط على الزر F12 للوصول إلى تعريفها. لاحظ كذلك أنك تستطيع الضغط بالزر الأيمن على رمز واستعمال إعادة التصنيع (refactoring) لإعادة تسميته.

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