كيفية استخدام مكتبات JavaScript في تطبيقات Angular 2+

هل تتذكر عندما كنت تتعلم AngularJS (الإصدار 1) ، واستمرت البرامج التعليمية في إخبارك أنك لست بحاجة إلى إضافة JQuery إلى مشروعك؟

لم يتغير ذلك - لست بحاجة إلى إضافة JQuery إلى مشروع Angular 2+ الخاص بك. ولكن إذا احتجت ، لأي سبب من الأسباب ، إلى استخدام بعض مكتبات JavaScript ، فأنت بحاجة إلى معرفة كيفية استخدامها في Angular. لذا ، لنبدأ من الصفر.

سأضيف تسطيرًا سفلية. js إلى مشروع وأريك كيف يعمل.

1. قم بإنشاء مشروع جديد باستخدام Angular CLI

إذا لم يكن لديك CLI مثبتًا بالفعل على جهازك ، فقم بتثبيته. بعد التثبيت ، قم بإنشاء مشروع جديد (إذا لم يكن لديك واحد بالفعل).

نانوغرام التعلم الجديد

الآن سيكون لديك مشروع Angular جديد يسمى " التعلم ".

2. قم بتثبيت الحزمة في مشروعك

انتقل إلى المشروع الذي صنعناه للتو:

التعلم على القرص المضغوط

استخدم مدير الحزم المفضل لديك لتثبيت المكتبة التي ستستخدمها ؛ أنا استخدم npmللتثبيت underscore.js.

تثبيت npm - حفظ الشرطة السفلية

3. استيراد المكتبة إلى Angular (TypeScript)

نحن نكتب رمزًا في TypeScript ، ويجب أن نتبع قواعده. TypeScript يحتاج إلى فهم underscore.js.

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

في JavaScript ، لا يعد نوع الوسائط مهمًا ولن تحصل على خطأ أثناء كتابة التعليمات البرمجية. لكن TypeScript لن يسمح لك بإعطاء مصفوفة لوظيفة تقبل سلسلة كمدخلات. ثم هنا السؤال: هل يجب علينا إعادة كتابة underscore.jsTypeScript وتحديد الأنواع هناك؟

بالطبع لا - يوفر TypeScript ملفات إعلان (* .d.ts) التي تحدد الأنواع وتوحد ملفات / مكتبات JavaScript لـ TypeScript.

تتضمن بعض المكتبات ملف كتابة ولا تحتاج إلى تثبيت وجهة كتابة TypeScript لها. ولكن في حالة عدم وجود .d.tsملف في المكتبة   ، فأنت بحاجة إلى تثبيته.

نحتاج فقط إلى العثور على underscore.jsملف تعريف النوع واستيراده . أقترح أن تستخدم بحث النوع للعثور على ملف التصريح للمكتبات التي تحتاجها.

ابحث عن underscoreفي Type Sceach ويعيد توجيهك إلى أنواع / شرطة سفلية. قم بتثبيت ملف التصريح باستخدام الأمر التالي:

npm install --save @types/underscore

4. إعلان نوع الاستيراد إلى تطبيق Angular

لنفترض أنك ستستخدم شرطة سفلية في ملفك app.component.ts. افتح app.component.tsبواسطة IDE الخاص بك وأضف الكود التالي في الجزء العلوي من الملف:

import * as _ from 'underscore';/*** OR simply:* import 'underscore';*/ 

أصبح TypeScript في هذا المكون يفهم الآن _ويعمل بسهولة كما هو متوقع.

السؤال: كيف يمكن استخدام مكتبة ليس لها تعريف نوع (* .d.ts) في TypeScript و Angular؟

قم بإنشائه إذا src/typings.d.tsلم يكن موجودًا. خلاف ذلك ، افتحها وأضف الحزمة الخاصة بك إليها:

declare var 

في TypeScript ، تحتاج الآن إلى استيراده بالاسم المحدد:

import * as yourPreferedName from 'yourLibrary';yourPreferedName.method(); 

استنتاج

في الختام ، دعنا نقدم مثالًا بسيطًا لرؤية مثال عملي لـ _. افتح app.component.tsوداخل appComponentالفصل اكتب a constructorالذي يُرجع العنصر الأخير من المصفوفة باستخدام _.last()وظيفة الشرطة السفلية :

... import * as _ from 'underscore'; ... export class AppComponent { constructor() { const myArray: number[] = [9, 1, 5]; const lastItem: number = _.last(myArray); //Using underscore console.log(lastItem); //5 } } 

إذا فتحت تطبيق Angular الخاص بك الآن ، فستحصل 5على وحدة التحكم ، مما يعني أنه يمكننا أن نضيف بشكل صحيح underscoreإلى مشروعنا ويعمل كما هو متوقع.

يمكنك إضافة أي مكتبات JavaScript إلى مشروعك فقط باتباع نفس الخطوات.

يمكنك متابعتي لمزيد من المقالات حول التكنولوجيا والبرمجة.