دروس TypeScript التعليمية: تعرف على أساسيات TypeScript



TypeScript هو مجموعة شاملة مكتوبة بقوة من JavaScript. في هذا البرنامج التعليمي لـ TypeScript ، سنتعمق في التفاصيل ونفهم الأساسيات.

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

مقدمة إلى TypeScript

TypeScript هو مجموعة فرعية مكتوبة من JavaScript يتم تجميعها إلى JavaScript عادي. يعد TypeScript موجهًا للكائنات تمامًا مع فئات وواجهات ولغات برمجة مكتوبة بشكل ثابت مثل سي # أو . يتطلب مترجمًا لتجميع وإنشاء ملف JavaScript. في الأساس ، يعد TypeScript هو إصدار ES6 من JavaScript مع بعض الميزات الإضافية.





تتم كتابة كود TypeScript في ملف بامتداد امتداد .ts ثم تجميعها في JavaScript باستخدام المترجم. يمكنك كتابة الملف في أي محرر تعليمات برمجية ويجب تثبيت المترجم على النظام الأساسي الخاص بك. بعد التثبيت ، فإن الأمر tsc يجمع كود TypeScript في ملف JavaScript عادي.

بناء الجملة:



var message: string = 'مرحبًا بك في Edureka!' console.log (رسالة)

عند التحويل البرمجي ، يُنشئ كود JavaScript التالي:

// تم إنشاؤه بواسطة typecript 1.8.10 var message = 'مرحبًا بك في Edureka!' console.log (رسالة)

ميزات TypeScript

الميزات - تعليمي مطبوعة - edureka

  • عبر منصة: يمكن تثبيت برنامج التحويل البرمجي TypeScript على أي نظام تشغيل مثل Windows و MacOS و Linux.



  • لغة الشيئية : يوفر TypeScript ميزات مثل الطبقات والواجهات والوحدات النمطية. وبالتالي ، يمكنه كتابة التعليمات البرمجية الموجهة للكائنات للتطوير من جانب العميل بالإضافة إلى التطوير من جانب الخادم.

  • فحص ثابت للنوع : يستخدم TypeScript الكتابة الثابتة ويساعد في التحقق من الكتابة في وقت الترجمة. وبالتالي ، يمكنك العثور على أخطاء أثناء كتابة التعليمات البرمجية دون تشغيل البرنامج النصي.

  • طباعة ثابتة اختيارية : يسمح TypeScript أيضًا بالكتابة الثابتة الاختيارية في حالة استخدام الكتابة الديناميكية لجافا سكريبت.

  • التلاعب في DOM : يمكنك استخدام TypeScript لمعالجة DOM لإضافة العناصر أو إزالتها.

  • ميزات ES 6 : يتضمن TypeScript معظم ميزات ECMAScript 2015 المخطط لها (ES 6 ، 7) مثل الفئة ، والواجهة ، ووظائف الأسهم ، إلخ.

مزايا استخدام TypeScript

  • TypeScript هو سريع وبسيط وسهل التعلم ويعمل على أي متصفح أو محرك JavaScript.

  • أنه مماثل إلى جافا سكريبت ويستخدم نفس التركيب والمعاني.

  • هذا يساعد مطوري الواجهة الخلفية على كتابة الواجهة الأمامية كود أسرع .

  • يمكن استدعاء كود TypeScript من ملف كود JavaScript موجود . كما أنه يعمل مع مكتبات وأطر عمل JavaScript الموجودة دون أي مشاكل.

  • يوفر ملف التعريف بامتداد .d.ts دعمًا لمكتبات جافا سكريبت مثل Jquery ، D3.js ، وما إلى ذلك ، يمكن أن تضيف شفرة TypeScript مكتبات JavaScript استخدام تعريفات النوع للاستفادة من مزايا فحص النوع ، والإكمال التلقائي للتعليمات البرمجية ، والتوثيق في مكتبات JavaScript المكتوبة ديناميكيًا.

  • يتضمن ميزات من ES6 و ES7 يمكن تشغيلها في محركات JavaScript بمستوى ES5 مثل Node.js .

الآن بعد أن فهمت ما هو TypeScript ، دعنا ننتقل إلى برنامج TypeScript التعليمي هذا ونلقي نظرة على الأنواع المختلفة.

أنواع TypeScript

يمثل نظام الكتابة الأنواع المختلفة من القيم التي تدعمها اللغة. يتحقق من صلاحية من الموردة القيم قبل أن يتم تخزينها أو معالجتها بواسطة البرنامج.

يمكن تصنيفها إلى نوعين مثل:

  • مدمج : يتضمن هذا الرقم والسلسلة والمنطقية والباطل والباطل وغير المحدد.
  • تعريف المستخدم : تشمل التعدادات والفئات والواجهات والمصفوفات والصفوف.

الآن دعنا ننتقل إلى دروس TypeScript التعليمية ونفهم المزيد عن المتغيرات.

دروس تيبسكريبت: المتغيرات

المتغير هو مساحة مسماة في الذاكرة تُستخدم لتخزين القيم.

تتضمن صيغة النوع للإعلان عن متغير في TypeScript نقطتين (:) بعد اسم المتغير ، متبوعًا بنوعه. على غرار JavaScript ، نستخدم امتداد كلمة var للإعلان عن متغير.

هناك أربعة خيارات عندما نعلن عن متغير:

var [المعرف]: [type-anotation] = value
var [المعرف]: [نوع التعليق التوضيحي]
var [المعرف] = القيمة
فار [تحديد]

مثال:

var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('معرف الموظف' + empid)

عند التحويل البرمجي ، سيتم إنشاء كود JavaScript التالي:

// تم إنشاؤه بواسطة typecript 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('معرف الموظف:' + empid)

انتاج:

الاسم: ديزي
معرف الموظف: 1001

دعنا الآن ننتقل إلى الموضوع التالي من برنامجنا التعليمي TypeScript.

العاملين

يتم استخدام عامل لتحديد الوظائف التي سيتم تنفيذها على البيانات. البيانات التي يعمل عليها المشغلون تسمى المعاملات. هناك أنواع مختلفة من العاملين في TypeScript مثل:

  • العمليات الحسابية
  • العوامل المنطقية
  • العوامل العلاقية
  • معاملات البت
  • عوامل التكليف

العمليات الحسابية

العاملين وصف

إضافة (+)

تُرجع مجموع المعاملات

الطرح (-)

إرجاع الفرق بين القيم

عمليه الضرب (*)

تُرجع حاصل ضرب القيم

قطاع (/)

ينفذ عملية قسمة ويعيد حاصل القسمة

معام (٪)

ينفذ عملية القسمة ويعيد الباقي

زيادة (++)

تزيد قيمة المتغير بمقدار واحد

التناقص (-)

ينقص قيمة المتغير بمقدار واحد

مثال:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Sum:' + res) res = num1 - num2 console.log ('Difference:' + res) الدقة = num1 * num2 console.log ('Product:' + res)

انتاج:

المجموع: 12
الفرق: 8
المنتج: 20

العوامل المنطقية

العاملين وصف

و (&&)

يتم إرجاعه صحيحًا فقط إذا كانت جميع التعبيرات المحددة تعود إلى القيمة الصحيحة

أو (||)

هذا يعيد صحيحًا إذا كان أحد التعبيرات المحددة على الأقل يعطي صحيحًا

ليس (!)

تقوم بإرجاع معكوس نتيجة التعبير.

مثال:

var avg: number = 20 var percentage: number = 90 console.log ('قيمة المتوسط:' + avg + '، قيمة النسبة المئوية:' + النسبة المئوية) var res: boolean = ((avg> 50) && (النسبة المئوية> 80 )) console.log ('(متوسط> 50) && (نسبة مئوية> 80):'، الدقة)

انتاج:

قيمة المتوسط: 20 ، قيمة النسبة المئوية: 90
(متوسط> 50) && (نسبة مئوية> 80): خطأ

العوامل العلاقية

العاملين وصف

>

أكثر من

<

أقل من

> =

أكبر من أو يساوي

<=

أصغر من أو يساوي

==

المساواة

! =

غير متساوي

مثال:

var num1: number = 10 var num2: number = 7 console.log ('قيمة num1:' + num1) console.log ('قيمة num2:' + num2) var res = num1> num2 console.log ('num1 أكبر من num2: '+ res) res = num1

انتاج:

قيمة عدد 1: 10
قيمة عدد 2: 7
عدد 1 أكبر من عدد 2: صحيح
num1 أقل من num2: خطأ

عوامل Bitwise

العاملين وصف

أحادي المعامل AND (&)

ينفذ عملية منطقية AND على كل جزء من وسيطاته الصحيحة.

أحادي المعامل OR (|)

ينفذ عملية Boolean OR على كل بت من وسيطاته الصحيحة.

Bitwise XOR (^)

ينفذ عملية OR حصرية منطقية على كل جزء من وسيطاته الصحيحة.

Bitwise NOT (~)

أسئلة مقابلة محمل فئة جافا

هذا عامل أحادي ويعمل عن طريق عكس كل وحدات البت في المعامل.

التحول الأيسر (<<)

إنه ينقل جميع وحدات البت في المعامل الأول إلى اليسار بعدد الأماكن المحددة في المعامل الثاني.

التحول الأيمن (>>)

يتم نقل قيمة المعامل الأيسر إلى اليمين بعدد البتات المحدد بواسطة المعامل الأيمن.

التحول الأيمن مع صفر (>>>)

إنه مشابه >> عامل التشغيل ، فيما عدا أن البتات التي تم نقلها إلى اليسار تكون دائمًا صفرية.

مثال:

var a: number = 2 // عرض بت 10 var b: number = 3 // عرض بت 11 نتيجة مختلفة = (a & b) console.log ('(a & b) =>') النتيجة = ( أ | ب) console.log ('(أ | ب) =>' ، نتيجة)

انتاج:

(أ & ب) => 2
(أ | ب) => 3

مشغلي التخصيص

العاملين وصف

مهمة بسيطة (=)

يعين القيم من معامل الجانب الأيمن إلى معامل الجانب الأيسر

إضافة وتعيين (+ =)

يضيف المعامل الأيمن إلى المعامل الأيسر ويعين النتيجة إلى المعامل الأيسر.

طرح وإسناد (- =)

يقوم بطرح المعامل الأيمن من المعامل الأيسر وتخصيص النتيجة إلى المعامل الأيسر.

الضرب والتعيين (* =)

تقوم بضرب المعامل الأيمن بالمعامل الأيسر وتخصيص النتيجة للمعامل الأيسر.

قسمة وإسناد (/ =)

يقسم المعامل الأيسر بالمعامل الأيمن ويخصص النتيجة إلى المعامل الأيسر.

مثال:

var a: number = 12 var b: number = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b وحدة التحكم .log ('a- = b:' + a)

انتاج:

أ = ب: 10
أ + = ب: 20
أ - = ب: 10

هؤلاء هم المشغلون المختلفون. دعنا الآن ننتقل إلى دروس TypeScript التعليمية الخاصة بنا ونتعرف على الحلقات.

الحلقات

قد تكون هناك حالات تحتاج فيها كتلة من التعليمات البرمجية إلى التنفيذ عدة مرات. أ عقدة تسمح لنا العبارة بتنفيذ عبارة أو مجموعة من العبارات عدة مرات.

يمكن تصنيف حلقات TypeScript على النحو التالي:

لحلقة

ال لحلقة هو تنفيذ لحلقة محددة.

بناء الجملة:

لـ (التعبير الأول ، التعبير الثاني ، التعبير الثالث) {// يتم تنفيذ العبارات بشكل متكرر}

هنا ، يتم تنفيذ التعبير الأول قبل أن تبدأ الحلقة. التعبير الثاني هو شرط تنفيذ الحلقة. ويتم تنفيذ التعبير الثالث بعد تنفيذ كل كتلة كود.

مثال:

لـ (اسمح أنا = 0 أنا<2 i++) { console.log ('Execute block statement' + i) }

انتاج:

تنفيذ بيان الكتلة 0
تنفيذ بيان الكتلة 1

حائط اللوب

تقوم حلقة while بتنفيذ التعليمات في كل مرة يتم فيها تقييم الشرط المحدد على صحيح.

بناء الجملة:

while (تعبير الشرط) {// code block to beعدم}

مثال:

دعني: الرقم = 1 بينما (i<3) { console.log( 'Block statement execution no.' + i ) i++ }

انتاج:

تنفيذ بيان الكتلة رقم 1
تنفيذ بيان الكتلة رقم 2

افعل .. أثناء التكرار

تتشابه حلقة do & hellip while مع حلقة while إلا أنها لا تقيّم الحالة لأول مرة يتم تنفيذ الحلقة.

بناء الجملة:

نفذ {// code block to beعدم} بينما (تعبير الشرط)

مثال:

اسمح لـ i: number = 1 do {console.log ('حظر تنفيذ العبارة no.' + i) i ++} بينما (i<3)

انتاج:

تنفيذ بيان الكتلة رقم 1
تنفيذ بيان الكتلة رقم 2

بصرف النظر عن هذه ، هناك عبارات break and continue في TypeScript التي يتم استخدامها في حلقة.

بيان كسر

يتم استخدام تعليمة break لأخذ السيطرة على البناء. استخدام تعليمة break في حلقة يساعد البرنامج في الخروج من الحلقة.

مثال:

var i: الرقم = 1 بينما (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop

انتاج:

المضاعف الأول للعدد 5 بين 1 و 10 هو: 5

متابعة البيان

تتخطى عبارة المتابعة العبارات اللاحقة في التكرار الحالي وتعيد التحكم إلى بداية الحلقة.

مثال:

var num: number = 0 var count: number = 0 (عدد = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)

انتاج:

عدد القيم الفردية بين 0 و 10 هو: 5

كانت هذه الحلقات المختلفة في TypeScript. الآن ، دعنا نمضي قدمًا في برنامج TypeScript التعليمي الخاص بنا وفهم الوظائف.

المهام

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

الوظائف المسماة

يتم استخدام دالة مسماة للإعلان عن دالة واستدعائها باسمها المحدد.

مثال:

عرض الوظيفة () {console.log ('TypeScript Function')} display ()

انتاج:

وظيفة TypeScript

وظيفة مجهولة

الوظيفة المجهولة هي التي يتم تعريفها على أنها تعبير. يتم تخزين هذا التعبير في متغير. يتم استدعاء هذه الوظائف باستخدام اسم المتغير الذي تم تخزين الوظيفة فيه.

مثال:

دع الترحيب = function () {console.log ('TypeScript Function')} تحية ()

انتاج:

وظيفة TypeScript

دالة السهم

تُستخدم رموز سهم الدهون للوظائف المجهولة ، أي لتعبيرات الوظائف. وتسمى أيضًا وظائف لامدا بلغات أخرى.

بناء الجملة:

(param1، param2، ...، paramN) => تعبير

استخدام السهم السمين (=>) يسقط الحاجة إلى استخدام الكلمة الرئيسية 'الوظيفة'. يتم تمرير المعلمات بين الأقواس الزاويّة ، ويتم وضع تعبير الوظيفة داخل الأقواس المتعرجة {}.

مثال:

دع المجموع = (x: number، y: number): number => {return x + y} sum (10، 30) // إرجاع 40

وظيفة التحميل الزائد

يوفر TypeScript مفهوم التحميل الزائد للوظيفة. وبالتالي ، يمكن أن يكون لديك وظائف متعددة بنفس الاسم ولكن أنواع معلمات مختلفة ونوع إرجاع.

مثال:

الوظيفة add (a: string، b: string): إضافة دالة السلسلة (a: number، b: number): رقم إرجاع a + b} إضافة ('Hello'، 'Edureka') // إرجاع 'Hello Edureka' add ( 10، 10) // إرجاع 20

في المثال أعلاه ، لدينا نفس الوظيفة add () مع إعلانين للوظائف وتنفيذ وظيفة واحدة. يحتوي التوقيع الأول على معلمتين من نوع السلسلة ، بينما يحتوي التوقيع الثاني على معلمتين من رقم النوع.

هذه هي أنواع الوظائف المختلفة. الآن ، دعنا ننتقل إلى دروسنا في TypeScript ونفهم السلاسل في TypeScript.

دروس تيبسكريبت: سلاسل

ال هو نوع بيانات بدائي آخر يتم استخدامه لتخزين البيانات النصية. تُحاط قيم السلسلة بعلامات اقتباس مفردة أو علامات اقتباس مزدوجة.

بناء الجملة:

var var_name = سلسلة جديدة (سلسلة)

هناك خصائص مختلفة للطرق المتوفرة في كائن String مثل:

  • باني - تقوم بإرجاع مرجع إلى وظيفة String التي أنشأت الكائن
  • الطول - هذا يعيد طول السلسلة
  • النموذج المبدئي - تسمح لك هذه الخاصية بإضافة خصائص وأساليب إلى كائن

مثال:

اسمحوا الاسم = سلسلة جديدة ('مرحبًا بك في Edureka!') console.log ('الرسالة:' + الاسم) console.log ('الطول:' + name.length)

انتاج:

الرسالة: مرحبًا بكم في Edureka!
الطول: 19

طرق السلسلة

تتضمن قائمة الأساليب في كائن السلسلة ما يلي:

طريقة وصف

charAt ()

تقوم بإرجاع الحرف في الفهرس المحدد

charCodeAt ()

تقوم بإرجاع رقم يشير إلى قيمة Unicode للحرف في الفهرس المحدد

concat ()

يدمج نص سلسلتين ويعيد سلسلة جديدة

دليل ل()

تُرجع الفهرس داخل كائن String الاستدعاء لأول تواجد للقيمة المحددة

lastIndexOf ()

تقوم بإرجاع الفهرس داخل كائن String الاستدعاء لآخر تواجد للقيمة المحددة

مباراة()

يستخدم لمطابقة تعبير عادي مع سلسلة

localeCompare ()

تُرجع رقمًا يشير إلى ما إذا كانت السلسلة المرجعية تأتي قبل أو بعد السلسلة المحددة في ترتيب الفرز أو أنها مماثلة

بحث()

يؤدي هذا إلى تنفيذ البحث عن تطابق بين تعبير عادي وسلسلة محددة

يحل محل()

يُستخدم للبحث عن تطابق بين تعبير عادي وسلسلة ، واستبدال السلسلة الفرعية المطابقة بسلسلة فرعية جديدة

شريحة()

يستخرج جزءًا من سلسلة ويعيد سلسلة جديدة

الانقسام()

يقسم كائن String إلى مصفوفة من السلاسل عن طريق فصل السلسلة إلى سلاسل فرعية

substr ()

ترجع الأحرف في سلسلة تبدأ من الموقع المحدد من خلال عدد محدد من الأحرف

سلسلة فرعية ()

تقوم بإرجاع الأحرف الموجودة في سلسلة بين فهرسين في السلسلة

toLocaleLowerCase ()

يتم تحويل الأحرف الموجودة داخل سلسلة إلى أحرف صغيرة مع مراعاة الإعدادات المحلية الحالية

toLocaleUpperCase ()

يتم تحويل الأحرف داخل سلسلة إلى الأحرف الكبيرة مع احترام اللغة الحالية

toLowerCase ()

تقوم بإرجاع قيمة سلسلة الاستدعاء المحولة إلى أحرف صغيرة

إلى الحالة العليا()

تقوم بإرجاع قيمة سلسلة الاستدعاء المحولة إلى أحرف كبيرة

إلى سلسلة()

إرجاع سلسلة تمثل الكائن المحدد

قيمة ال()

إرجاع القيمة البدائية للالكائن المحدد

مثال:

let str: string = 'مرحبًا بك في Edureka' str.charAt (0) // إرجاع 'w' str.charAt (2) // إرجاع 'l' 'مرحبًا بك في Edureka'. إرجاع 'l' let str1 string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // إرجاع 'welcomeEdureka' str1.concat (''، str2) // إرجاع 'welcome Edureka' str1.concat ('' إلى ' ') // تعيد 'مرحبًا بك في'

الآن بعد أن تعرفت على السلاسل ، دعنا ننتقل إلى برنامج TypeScript التعليمي هذا ونفهم المصفوفات.

المصفوفات في TypeScript

ان مجموعة مصفوفة هو نوع خاص من أنواع البيانات يخزن قيمًا متعددة لأنواع بيانات مختلفة بالتسلسل باستخدام صيغة خاصة. يتم تحديد عناصر المصفوفة بواسطة عدد صحيح فريد يسمى منخفض أو فهرس العنصر.

بناء الجملة:

var array_name [: datatype] // تصريح array_name = [val1، val2، valn ..] // تهيئة

مثال:

اسمحوا أسماء: Array names = ['John'، 'Daisy'، 'Rachel'] let ids: Array ids = [101، 700، 321]

طرق المصفوفة

فيما يلي قائمة بأساليب المصفوفة المختلفة التي يمكن استخدامها لأغراض مختلفة:

طريقة وصف

منقي()

يُنشئ مصفوفة جديدة تحتوي على جميع عناصر هذه المصفوفة التي ترجع لها وظيفة التصفية المقدمة true

كل()

يعود صحيحًا إذا كان كل عنصر في هذه المصفوفة يفي بوظيفة الاختبار المتوفرة

concat ()

إرجاع مصفوفة جديدة تتكون من هذه المصفوفة مرتبطة بمصفوفات أخرى

دليل ل()

إرجاع أول أو أقل فهرس لعنصر داخل المصفوفة يساوي القيمة المحددة

لكل ()

يستدعي وظيفة لكل عنصر في المصفوفة

انضم()

يجمع كل عناصر المصفوفة في سلسلة

lastIndexOf ()

إرجاع آخر أو أكبر فهرس لعنصر ضمن المصفوفة يساوي القيمة المحددة

خريطة()

ينشئ مصفوفة جديدة بنتائج استدعاء دالة متوفرة على كل عنصر في هذه المصفوفة

إدفع()

يضيف عنصرًا أو أكثر إلى نهاية المصفوفة ويعيد الطول الجديد للمصفوفة

البوب ​​()

يزيل العنصر الأخير من مصفوفة ويعيد ذلك العنصر

خفض()

إنشاء مصفوفة كائن في جافا

قم بتطبيق دالة في وقت واحد مقابل قيمتين للمصفوفة من اليسار إلى اليمين لتقليلها إلى قيمة واحدة

تقليل اليمين ()

قم بتطبيق دالة في وقت واحد مقابل قيمتين للمصفوفة من اليمين إلى اليسار لتقليلها إلى قيمة واحدة

يعكس()

يعكس ترتيب عناصر المصفوفة

تحول()

يزيل العنصر الأول من مصفوفة ويعيد ذلك العنصر

شريحة()

يستخرج قسمًا من مصفوفة ويعيد مصفوفة جديدة

بعض()

يعود صحيحًا إذا كان عنصر واحد على الأقل في هذه المصفوفة يفي بوظيفة الاختبار المقدمة

فرز()

يفرز عناصر المصفوفة

إلى سلسلة()

إرجاع سلسلة تمثل المصفوفة وعناصرها

لصق او جمع()

يضيف و / أو يزيل عناصر من مصفوفة

unshift ()

يضيف عنصرًا أو أكثر إلى مقدمة المصفوفة ويعيد الطول الجديد للمصفوفة

مثال:

var name: Array = ['John'، 'Daisy'، 'Tara'] name.sort () console.log (name) // output: ['Daisy'، 'John'، 'Tara'] console.log ( name.pop ()) // output: Tara name.push ('Rachel') console.log (name) // output: ['John'، 'Daisy'، 'Rachel]]

دعنا الآن نمضي قدمًا في هذا البرنامج التعليمي TypeScript والتعرف على الواجهات.

واجهات TypeScript

الواجهة عبارة عن هيكل يحدد العقد في تطبيقك. يحدد بناء الجملة للفئات التي يجب اتباعها. يحتوي فقط على إعلان الأعضاء ومن مسؤولية الفئة المشتقة تحديد الأعضاء.

مثال:

واجهة الموظف {empID: number empName: string getSalary: (number) => number // arrow function getManagerName (number): string}

في المثال أعلاه ، فإن ملف موظف تتضمن الواجهة خاصيتين إمبيد و empName . يتضمن أيضًا إعلان الطريقة getSalaray باستخدام وظيفة السهم الذي يتضمن معلمة رقم واحد ونوع إرجاع رقم. ال getManagerName تم التصريح عن الطريقة باستخدام وظيفة عادية.

تيبسكريبت الطبقات

قدم TypeScript فئات بحيث يمكنهم الاستفادة من مزايا التقنيات الموجهة بالكائنات مثل التغليف والتجريد. يتم تجميع الفئة في TypeScript إلى وظائف JavaScript عادية بواسطة مترجم TypeScript للعمل عبر الأنظمة الأساسية والمتصفحات.

يشمل الفصل ما يلي:

  • باني
  • الخصائص
  • طرق

مثال:

فئة الموظف {empID: number empName: مُنشئ السلسلة (المعرف: رقم ، الاسم: سلسلة) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}

ميراث

يدعم TypeScript ميراث لأنها قدرة البرنامج على إنشاء فئات جديدة من فصل موجود. يُطلق على الفئة التي يتم توسيعها لإنشاء فئات جديدة اسم الفئة الأصلية أو الفئة الممتازة. تسمى الفصول التي تم إنشاؤها حديثًا بالفئات الفرعية أو الفرعية.

يرث الفصل من فئة أخرى باستخدام الكلمة الرئيسية 'تمتد'. ترث الفئات الفرعية جميع الخصائص والأساليب باستثناء الأعضاء الخاصين والمُنشئين من الفئة الأصلية. لكن TypeScript لا يدعم الوراثة المتعددة.

بناء الجملة:

يمتد class child_class_name إلى parent_class_name

مثال:

فئة الشخص {الاسم: مُنشئ السلسلة (الاسم: سلسلة) {this.name = الاسم}} الفئة الموظف تمتد الشخص {empID: مُنشئ الرقم (empID: number ، name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + '، معرف الموظف =' + this.empID)}} دع emp = موظف جديد (701، 'Jason') emp.displayName () // الاسم = جايسون ، معرف الموظف = 701

الآن بعد أن تعرفت على الفصول ، دعنا نمضي قدمًا في برنامج TypeScript التعليمي هذا والتعرف على الكائنات.

كائنات في TypeScript

الكائن هو مثيل يحتوي على مجموعة مختلفة من أزواج المفتاح والقيمة. يمكن أن تكون القيم قيمًا أو وظائف عددية أو حتى مجموعة من الكائنات الأخرى.

بناء الجملة:

var object_name = {key1: “value1”، // scalar value key2: “value”، key3: function () {// function}، key4: [“content1”، “content2”]

يمكن أن يحتوي الكائن على قيم عددية ووظائف وهياكل مثل المصفوفات والبنيات.

مثال:

var person = {firstname: 'Danny'، lastname: 'Green'} // الوصول إلى قيم الكائن console.log (person.firstname) console.log (person.lastname)

عند التحويل البرمجي ، سيتم إنشاء نفس الكود في JavaScript.

انتاج:

داني
أخضر

كانت هذه هي العناصر المهمة المختلفة لـ TypeScript. الآن ، دعنا ننتقل إلى دروس TypeScript التعليمية هذه ونلقي نظرة على مثال لفهم حالة الاستخدام.

دروس تيبسكريبت: حالة الاستخدام

هنا ، سوف نتعلم كيفية تحويل ملف إلى TypeScript.

عندما نقوم بتجميع ملف TypeScript ، فإنه ينتج ملف JavaScript مطابق بنفس الاسم. هنا ، نحتاج إلى التأكد من أن ملف JavaScript الأصلي الذي يعمل كمدخلات لا يمكن أن يكون في نفس الدليل حتى لا يتجاوز TypeScriptها.

تتضمن عملية الترحيل من JavaScript إلى TypeScript الخطوات التالية:

1- أضف ملف tsconfig.json إلى المشروع

تحتاج إلى إضافة ملف tsconfig.json إلى المشروع. يستخدم TypeScript ملف tsconfig.json لإدارة خيارات الترجمة الخاصة بالمشروع ، مثل الملفات التي تريد تضمينها واستبعادها.

{'compilerOptions': {'outDir': './built'، 'allowJs': true، 'target': 'es5'}، 'include': ['./src/**/*']}

2. التكامل مع أداة البناء

تحتوي معظم مشاريع JavaScript على أداة بناء متكاملة مثل gulp أو webpack. يمكنك دمج المشاريع مع حزمة الويب بالطرق التالية:

  • قم بتشغيل الأمر التالي على Terminal:
$ npm قم بتثبيت أداة تحميل خرائط المصدر الرائعة من نوع awesome-typescript-loader

في تكامل حزمة الويب ، يمكنك استخدام أداة تحميل تنسيقات رائعة مدمجة مع أداة تحميل خرائط المصدر لتسهيل تصحيح أخطاء التعليمات البرمجية المصدر.

  • ثانيًا ، ادمج خاصية تهيئة الوحدة النمطية في ملف webpack.config.js لتضمين أدوات التحميل.

3. نقل جميع ملفات .js إلى ملفات .ts

في هذه الخطوة ، يجب عليك إعادة تسمية ملف .js إلى ملف .ts. وبالمثل ، إذا كان الملف يستخدم JSX ، فستحتاج إلى إعادة تسميته إلى .tsx. الآن ، إذا فتحنا هذا الملف في محرر يدعم TypeScript ، فقد تبدأ بعض الأكواد في إعطاء أخطاء تجميع. لذلك ، فإن تحويل الملفات واحدًا تلو الآخر يسمح بمعالجة أخطاء الترجمة بسهولة أكبر. إذا عثرت TypeScript على أي أخطاء تجميع أثناء التحويل ، فلا يزال بإمكانها ترجمة الشفرة.

4. تحقق من وجود أخطاء

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

5. استخدم مكتبات JavaScript لجهات خارجية

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

بالنسبة إلى jQuery ، يمكنك تثبيت التعريف:

$ npm install @ types / jquery

بعد ذلك ، قم بإجراء التغييرات على مشروع JavaScript ، وقم بتشغيل أداة الإنشاء. الآن ، يجب أن يكون لديك مشروع TypeScript مترجم إلى JavaScript عادي يمكن تشغيله في المتصفح.

بهذا نكون قد وصلنا إلى نهاية هذا البرنامج التعليمي TypeScript. أتمنى أن تكون قد فهمت جميع العناصر المهمة في TypeScript.

تفحص ال بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في 'دروس TypeScript' وسنقوم بالرد عليك.