TypeScript



typescript

وثائق TypeScript

ابدأ باستخدام تطبيق TypeScript بسيط.

لنبدأ بإنشاء تطبيق ويب بسيط باستخدام TypeScript.

تثبيت TypeScript

هناك طريقتان رئيسيتان للحصول على أدوات TypeScript:

  • عبر npm (مدير حزمة Node.js)
  • بتثبيت ملحقات Visual Studio TypeScript's

يتضمن Visual Studio 2015 و Visual Studio 2013 Update 2 TypeScript بشكل افتراضي. إذا لم تقم بتثبيت TypeScript باستخدام Visual Studio ، فلا يزال بإمكانك تنزيله .

لمستخدمي الآلية:

npm install -g typescript

بناء أول ملف TypeScript الخاص بك

في المحرر ، اكتب شفرة JavaScript التالية في greeter.ts :

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

تجميع التعليمات البرمجية الخاصة بك

استخدمنا امتداد .ts ، ولكن هذا الرمز هو مجرد جافا سكريبت. يمكنك نسخ / لصق هذا مباشرة من تطبيق جافا سكريبت موجود.

في سطر الأوامر ، قم بتشغيل المحول البرمجي لـ TypeScript:

tsc greeter.ts

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

الآن يمكننا البدء في الاستفادة من بعض عروض أدوات TypeScript الجديدة. أضف a : string التعليق التوضيحي لنوع : string إلى وسيطة وظيفة "الشخص" كما هو موضح هنا:

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

اكتب التعليقات التوضيحية

اكتب التعليقات التوضيحية في TypeScript هي طرق خفيفة لتسجيل العقد المقصود من الوظيفة أو المتغير. في هذه الحالة ، نعتزم استدعاء وظيفة المرسل بمعلمة سلسلة مفردة. يمكننا محاولة تغيير مرحب الاتصال لتمرير مصفوفة بدلاً من ذلك:

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

إعادة تجميع ، سترى الآن خطأ:

greeter.ts(7,26): Supplied parameters do not match any signature of call target

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

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

واجهات

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

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

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

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

document.body.innerHTML = greeter(user);

الطبقات

أخيرًا ، دعنا نمد المثال للمرة الأخيرة بالفصول الدراسية. يدعم TypeScript الميزات الجديدة في JavaScript ، مثل دعم البرمجة الشيئية التي تستند إلى الفئة.

سنقوم هنا بإنشاء فصل Student مع مُنشئ وعدد قليل من الحقول العامة. لاحظ أن الفصول والواجهات تعمل بشكل جيد معًا ، مما يسمح للمبرمج بتحديد المستوى المناسب من التجريد.

وتجدر الإشارة أيضًا إلى أن استخدام public في المناقشات إلى المُنشئ هو اختصار يسمح لنا بإنشاء خصائص بهذا الاسم تلقائيًا.

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

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

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

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

document.body.innerHTML = greeter(user);

أعد تشغيل tsc greeter.ts وسترى جافا سكريبت التي تم إنشاؤها هي نفس الرمز السابق. تعتبر الطبقات في TypeScript اختصارًا لنفس OO المستند إلى النموذج الأولي والذي يُستخدم بكثرة في 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. ضع المؤشر على المرجع إلى وظيفة المرشد ، واضغط على F12 للانتقال إلى تعريفه. لاحظ أيضًا أنه يمكنك النقر بزر الماوس الأيمن على رمز واستخدام إعادة بيع ديون لإعادة تسميته.

تعمل معلومات النوع المتوفرة مع الأدوات للعمل مع JavaScript على نطاق التطبيق. لمزيد من الأمثلة على ما هو ممكن في TypeScript ، راجع قسم Samples في موقع الويب.

صورة Visual Studio