Comment utiliser les bibliothèques JavaScript dans les applications Angular 2+

Vous souvenez-vous quand vous appreniez AngularJS (version 1) et que les didacticiels vous disaient sans cesse que vous n'avez pas besoin d'ajouter JQuery à votre projet?

Cela n'a pas changé - vous n'avez pas besoin d'ajouter JQuery à votre projet Angular 2+. Mais si, pour une raison quelconque, vous pourriez avoir besoin d'utiliser certaines bibliothèques JavaScript, vous devez savoir comment les utiliser dans Angular. Alors, commençons à partir de zéro.

Je vais ajouter underscore.js à un projet et vous montrer comment cela fonctionne.

1. Créez un nouveau projet à l'aide de Angular CLI

Si vous n'avez pas encore installé CLI sur votre ordinateur, installez-le. Après l'installation, créez un nouveau projet (si vous n'en avez pas déjà un).

ng nouvel apprentissage

Vous aurez maintenant un nouveau projet Angular nommé « apprentissage ».

2. Installez le package dans votre projet

Allez au projet que nous venons de réaliser:

apprentissage cd

Utilisez votre gestionnaire de packages préféré pour installer la bibliothèque que vous allez utiliser; J'utilise npmpour installer underscore.js.

npm install - enregistrer le trait de soulignement

3. Importez la bibliothèque dans Angular (TypeScript)

Nous écrivons du code en TypeScript, et nous devrions suivre ses règles. TypeScript doit comprendre underscore.js.

Comme vous le savez peut-être, TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript brut. TypeScript a sa propre syntaxe, la fonction et les variables peuvent avoir des types définis. Mais lorsque nous allons utiliser une bibliothèque externe telle que le trait de soulignement, nous devons déclarer des définitions de type pour TypeScript.

En JavaScript, le type d'arguments n'est pas important et vous n'obtiendrez pas d'erreur pendant que vous écrivez du code. Mais TypeScript ne vous permettra pas de donner un tableau à une fonction qui accepte une chaîne comme entrée. Alors voici la question: devrions-nous réécrire le underscore.jsdans TypeScript et définir les types là-bas?

Bien sûr que non - TypeScript fournit des fichiers de déclaration (* .d.ts) qui définissent les types et normalisent un fichier / bibliothèques JavaScript pour TypeScript.

Certaines bibliothèques incluent un fichier de saisie et vous n'avez pas besoin d'installer la destination de type de TypeScript pour elles. Mais dans le cas où une bibliothèque n'a pas de   .d.tsfichier, vous devez l'installer.

Nous avons juste besoin de trouver et d'importer le underscore.jsfichier de définition de type. Je vous suggère d'utiliser la recherche de type pour trouver le fichier de déclaration des bibliothèques dont vous avez besoin.

Recherchez underscoredans Type Sceach et il vous redirige vers les types / traits de soulignement. Installez le fichier de déclaration à l'aide de la commande suivante:

npm install --save @types/underscore

4. Importez la déclaration de type dans l'application Angular

Disons que vous allez utiliser un trait de soulignement dans votre app.component.tsfichier. Ouvrez le app.component.tspar votre IDE et ajoutez le code suivant en haut du fichier:

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

Le TypeScript dans ce composant comprend maintenant _et il fonctionne facilement comme prévu.

Question: Comment utiliser une bibliothèque qui n'a pas de définition de type (* .d.ts) dans TypeScript et Angular?

Créez-le si le src/typings.d.tsfichier n'existe pas. Sinon, ouvrez-le et ajoutez-y votre package:

declare var 

Dans votre TypeScript, vous devez maintenant l'importer sous le nom donné:

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

Conclusion

Pour conclure, faisons un exemple simple pour voir un exemple fonctionnel de _. Ouvrez app.component.tset à l'intérieur de la appComponentclasse écrivez un constructorqui retourne le dernier élément d'un tableau en utilisant la _.last()fonction de soulignement :

... 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 } } 

Si vous ouvrez votre application Angular maintenant, vous accéderez 5à la console, ce qui signifie que nous pourrions l'ajouter correctement underscoreà notre projet et que cela fonctionne comme prévu.

Vous pouvez ajouter des bibliothèques JavaScript à votre projet en suivant simplement les mêmes étapes.

Vous pouvez me suivre pour plus d'articles sur la technologie et la programmation.