3

J'essaie de comprendre comment utiliser les fichiers typings dans mon projet Angular. Mais tous les guides ou les messages SO semblent dire juste pour importer le module déclaré dans le fichier de typage. Dans mon cas (gridstack.js), il n'y a pas de modules déclarés, seulement des interfaces et un espace de noms déclaré.Est-ce qu'un fichier de typage sans aucun module déclaré a un sens?

J'ai déclaré gridstack dans le fichier tsconfig.file sous types. Et je peux, par exemple. déclarer une variable de type IGridstackOptions sans erreur du compilateur, mais je reçois une erreur d'exécution me disant C:/myPath/src/app/other-route/other-route.component.ts (16,60): Cannot find name 'IGridstackOptions'.

Quelqu'un sait-il ce que je fais mal? Et est-ce logique d'avoir un fichier de typage sans modules déclarés? Si oui, pouvez-vous expliquer le raisonnement derrière cela?

Merci :)

Répondre

1

Vous pouvez utiliser une bibliothèque JavaScript de deux façons:

  • utilisant l'objet global bibliothèque
  • importation d'objets bibliothèque

Jusqu'à récemment, la plupart des bibliothèques principalement utilisé la première approche et ajouté des objets globaux. Par exemple, objet global jQuery. De nos jours, la plupart des bibliothèques conditionnent leurs bibliothèques sous la forme de modules UMD permettant l'utilisation de la bibliothèque en tant qu'objet global ou en tant qu'importation si le code est exécuté dans un environnement de support de module.

Tapuscrit définit deux moyens qui peuvent être utilisés pour définir les déclarations:

declare namespace NodeJS 
declare module "buffer" 

La première définit un objet (espace de noms, généralement global), tandis que la seconde définit un module. Voir here.

Le fichier typages pour la bibliothèque gridstack définit un objet global:

declare namespace GridStackUI 

et c'est aussi ce qui se fait à l'intérieur du code:

(function($, _) { 

    var scope = window; 
    ... 

    return scope.GridStackUI; 
}); 

Et il peut être utilisé dans votre code comme ceci:

declare const gridstack: GridStack; 

Cependant, à l'intérieur du gridstack.js e est aussi définition du module UMD peut donc être utilisé dans le module environnement de soutien comme celui-ci:

import * as gridstack from 'gridstack'; 

mais le fichier de typages ne dispose pas de déclarations pour cet usage.

+0

Bonne explication @AngularInDepth! Cependant, le compilateur me dit que GridstackUI n'existe pas sur la fenêtre de type. Et n'est-ce pas désapprouvé, du point de vue du design, d'utiliser une fenêtre en angle, mais c'est peut-être la seule façon de le faire? – Beese

+0

utiliser la 'déclaration const gridstack suivante: GridStack;', j'ai mis à jour ma réponse –

+0

Wonderful! Juste ce dont j'avais besoin, merci beaucoup, votre réponse est très appréciée :) – Beese