Comment appeler des bibliothèques tierces dans Angular

Cette fois, je vais vous montrer comment appeler des bibliothèques tierces dans Angular, et quelles sont les précautions à prendre pour appeler des bibliothèques tierces dans Angular. Ce qui suit est un cas pratique, jetons un coup d'œil.

Les composants et modules d'Angular semblent être un peu incompatibles avec les bibliothèques tierces existantes (telles que lodash, moment, etc.). La principale raison en est l'illusion provoquée par TypeScript. Les trois piliers du front-end sont en fait les mêmes, quel que soit le type de framework front-end, ces bibliothèques tierces peuvent être utilisées.

Ce qui suit, j'expliquerai sous un autre angle comment Angular utilise des bibliothèques tierces.

1. Écrivez-le devant

Avant de commencer, vous devez comprendre le système de modules TypeScript - un module fait référence à un module dans sa propre portée Exécuté dans la portée globale plutôt que dans la portée globale ; la relation entre les modules repose sur l'exportation et l'importation. Pendant le processus de compilation, le compilateur s'appuie également sur cette relation pour localiser les fichiers à compiler.

TypeScript publie toujours des bibliothèques de classes sous la forme de fichiers JavaScript, ce qui entraîne des types qui ne peuvent pas être exprimés et nécessitent un fichier de déclaration pour décrire le type. Par conséquent, le fichier de déclaration est devenu un élément indispensable de la bibliothèque de classes ; .

2. Classification

Angular est développé en utilisant le langage TypeScript Comme mentionné dans la section précédente, si vous souhaitez utiliser une bibliothèque de classes. , La condition est de savoir s'il existe un document de déclaration.

Il existe un fichier de déclaration

Pour distinguer si la bibliothèque de classes a un fichier de déclaration *.d.ts, vous pouvez le confirmer sous deux aspects :

1. La bibliothèque de classes est livrée avec

Après avoir installé un package dépendant de Npm, vous pouvez directement vérifier si le package.json de sa bibliothèque contient le nœud typings, par exemple, moment :

"typings": "./moment.d.ts"

2. Recherche TypeSearch

TypeScript fournit un site Web appelé TypeSearch, où vous pouvez directement saisir des mots-clés pour vérifier si le fichier de déclaration de la bibliothèque de classes est inclus.

Par exemple, lodash peut être cliqué dans la liste pour accéder au site Web npm, et vous verrez une commande comme celle-ci :

npm install --save @types/lodash

Aucun fichier de déclaration

Ce genre de situation est assez courant. Par exemple, G2 n'avait pas de fichier de déclaration auparavant. Dans ce cas, vous ne pouvez écrire le fichier de déclaration que vous-même.

Le projet créé par Angular Cli contiendra un fichier de déclaration src/typings.d.ts, qui sera automatiquement inclus dans la définition de déclaration globale, et il est préférable d'écrire les informations de déclaration de ces bibliothèques de classes dans il.

De manière générale, il est difficile d'écrire un fichier de déclaration complet pour une bibliothèque de classes. C'est trop rentable, il ne s'agit donc souvent que d'un "any" pour certains objets globaux (ce qui signifie ignorer le type statique). ). Chèque) peut également être utilisé, par exemple :

// src/typings.d.ts
declare var G2: any;

3. Comment l'utiliser ?

Les fichiers de relevés sont des liens, et la façon de les utiliser est toujours divisée de cette manière.

Pour les fichiers de déclaration, il n'y a rien à faire de plus, utilisez simplement import là où le module est nécessaire, par exemple :

import * as moment from 'moment';
moment(); // 当前时间

Aucun fichier de déclaration

Il est important de voir quoi faire lorsqu'il n'y a pas de fichier de déclaration. Comme mentionné précédemment, utiliser any pour indiquer que l'on ignore la vérification de type statique signifie que l'utilisateur ne peut pas profiter du plaisir des invites intelligentes apportées par le fichier de déclaration.

Comme G2, nous pouvons l'utiliser directement n'importe où dans le projet, mais il ne peut reconnaître que les variables G2, et les méthodes ou propriétés de l'instance sont agnostiques.

// app.component.ts
const g2 = new G2();
g2. // 输入 `.` 后是不会有任何方法或属性

De plus, TypeScript n'effectuera aucune vérification de type sur G2 pendant le processus de compilation. Seul vous pouvez déterminer si G2 existe réellement. Pour Angular, ces modules doivent être explicitement chargés dans le nœud scripts de .angular-cli.json.

// .angular-cli.json
"scripts": [
  "../node_modules/@antv/g2/dist/g2.min.js"
]

TypeScript est toujours du code JavaScript après la compilation. Si vous ne chargez pas manuellement les fichiers JavaScript liés à G2, cela générera naturellement une erreur indiquant que G2 n'est pas trouvé pendant le processus en cours.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Un résumé de l'utilisation des objets d'état dans vuex

Projet de plug-in React-redux analyse d'utilisation pratique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!