Comment utiliser des bibliothèques tierces dans angulairejs ? Explication détaillée de l'utilisation de bibliothèques tierces dans angulairejs

Cet article présente comment angularjs utilise les bibliothèques tierces. Quelles bibliothèques tierces peuvent être utilisées par angulairejs ?

Les composants et modules d'Angular semblent être un peu incompatibles avec les bibliothèques tierces existantes (telles que : lodash, moment, etc.). La raison principale en est l'illusion provoquée par. Tapuscrit . Les trois piliers du front-end sont en fait les mêmes. Quel que soit le framework front-end utilisé, 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. Écrit devant

Avant de commencer, vous devez comprendre le système de module TypeScript - un module est exécuté dans sa propre portée, pas dans la portée globale sur laquelle s'appuie Time ; export et import pour établir des relations. 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, pour qu'une bibliothèque de classes soit utilisée, la condition essentielle est de savoir s'il existe un . dossier 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. Classe La bibliothèque 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, tel que 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,

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

npm install --save @types/lodash

Aucun fichier de déclaration

Ce genre de situation est assez courant. Par exemple, il n'y avait pas de fichier de déclaration auparavant

Dans ce cas, vous ne pouvez rédiger le fichier de déclaration que vous-même. G2

Le projet créé par Angular Cli contiendra un

fichier de déclaration, qui sera automatiquement inclus dans la src/typings.d.tsdéfinition de déclaration globale, et ce serait une bonne idée d'écrire les informations de déclaration de ces bibliothèques de classes mais.

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

pour certains objets globaux (ce qui signifie ignorer le type Static). vérification) est également disponible, par exemple : any

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

3. Comment l'utiliser ?

Le fichier de déclaration est un lien, et il est toujours utilisé de cette manière pour diviser comment l'utiliser.

Pour les fichiers de déclaration, il n'y a rien à faire de plus, utilisez simplement

pour importer là où le module est nécessaire, par exemple : import

import * as moment from 'moment';

moment(); // 当前时间

Aucun fichier de déclaration

Il est important de regarder quoi faire lorsqu'il n'y a pas de fichier de déclaration. Comme mentionné précédemment, utiliser

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

Comme

, 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. G2

// app.component.ts

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

De plus, TypeScript n'effectuera aucune vérification de type sur

pendant le processus de compilation. L'existence de G2 ne peut être déterminée que par vous-même. Pour Angular, ces modules doivent être explicitement chargés sur le nœud G2 de .angular-cli.json. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois scriptsManuel de développement AngularJS pour en savoir)

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

TypeScript est toujours du code JavaScript après compilation si vous ne chargez pas manuellement le.

fichiers JavaScript associés, Naturellement, une erreur G2 introuvable sera fournie pendant le fonctionnement. G2

Résumé

En regardant comment utiliser des bibliothèques tierces du point de vue de TypeScript, vous aurez un sentiment différent. Il s'agit simplement d'une simple description peu fiable mais efficace. J'espère que les gens qui savent mieux feront preuve de pitié.

Il n'y a aucune intention de discréditer

ici. Maintenant, G2 a fourni un document de déclaration. G2

D'accord, cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois

Manuel d'utilisation d'AngularJS pour en savoir plus). Si vous avez des questions, vous pouvez laisser un message). ci-dessous.

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!