Lorsque j’utilise typescript, dois-je importer un plugin.d.ts pour chaque fichier js externe que j’utilise? En d’autres termes, dois-je créer un fichier jQuery.d.ts avec toutes les interfaces?
Le problème avec les plug-ins jQuery (et les autres bibliothèques basées sur des plug-ins) est que non seulement vous avez besoin d’un fichier library.d.ts pour la bibliothèque de base, mais que vous avez également besoin d’un fichier plugin.d.ts pour chaque plug-in. De plus, les fichiers plugin.d.ts doivent étendre les interfaces de bibliothèque définies dans les fichiers library.d.ts. Heureusement, TypeScript a une fonctionnalité intéressante qui vous permet de faire exactement cela.
Avec les classes
il ne peut actuellement y avoir qu’une seule définition cononique d’une classe dans un projet. Donc, si vous définissez une class Foo
les membres que vous mettez sur Foo
sont tout ce que vous obtenez. Toute définition supplémentaire de Foo
entraînera une erreur. Avec les interfaces
, cependant, les membres sont additifs, donc si vous définissez la interface Bar
avec un ensemble de membres, vous pouvez définir une “Barre d’interface” une seconde fois pour append des membres supplémentaires à l’ interface
. C’est la clé de la prise en charge des plugins jQuery de manière fortement typée.
Donc, pour append le support d’un plugin jQuery donné, vous devrez créer un fichier plugin.d.ts pour le plugin que vous voulez utiliser. Nous utilisons les modèles jQuery dans notre projet, alors voici le fichier jquery.tmpl.d.ts que nous avons créé pour append le support de ce plugin:
interface JQuery { tmpl(data?:any,options?:any): JQuery; tmplItem(): JQueryTmplItem; template(name?:ssortingng): ()=>any; } interface JQueryStatic { tmpl(template:ssortingng,data?:any,options?:any): JQuery; tmpl(template:(data:any)=>ssortingng,data?:any,options?:any): JQuery; tmplItem(element:JQuery): JQueryTmplItem; tmplItem(element:HTMLElement): JQueryTmplItem; template(name:ssortingng,template:any): (data:any)=>ssortingng[]; template(template:any): JQueryTemplateDelegate; } interface JQueryTemplateDelegate { (jQuery: JQueryStatic, data: any):ssortingng[]; } interface JQueryTmplItem { data:any; nodes:HTMLElement[]; key:number; parent:JQueryTmplItem; }
La première chose que nous avons faite est de définir les méthodes qui sont ajoutées à l’interface JQuery
. Celles-ci vous permettent d’obtenir intellisense et de vérifier le type lorsque vous tapez $('#foo').tmpl();
Ensuite, nous avons ajouté des méthodes à l’interface JQueryStatic
qui s’affichent lorsque vous tapez $.tmpl();
Et enfin, le plugin jQuery Templates définit certaines de ses propres structures de données. Nous avons donc dû définir des interfaces pour ces structures.
Maintenant que nous avons les interfaces supplémentaires définies, il suffit de les référencer à partir des fichiers .ts. Pour ce faire, nous ajoutons simplement les références ci-dessous en haut de notre fichier .ts et c’est tout. Pour ce fichier, TypeScript verra à la fois les méthodes de base jQuery et les méthodes de plug-in. Si vous utilisez plusieurs plug-ins, assurez-vous que vous avez tous vos fichiers plugin.d.ts individuels et que vous devriez être bon.
/// ///
L’enregistrement d’un fichier .ts ne déclenche pas automatiquement la compilation dans Visual Studio. Vous devrez construire / reconstruire pour déclencher la compilation.
Déclarer des fichiers (fichier.d.ts) permet au compilateur TypeScript d’obtenir de meilleures informations sur les types de bibliothèques JavaScript que vous utilisez dans ce fichier. Vous pouvez définir vos interfaces dans un seul fichier ou dans plusieurs fichiers. Cela ne devrait pas faire de différence. Vous pouvez également “déclarer” les types / variables que vous utilisez des bibliothèques externes en utilisant quelque chose comme:
declare var x: number;
qui indiquera au compilateur de traiter x comme un nombre.
J’ai été à la recherche d’un d.ts pour jquery.inputmask et finalement j’ai créé un fichier simple. C’est à
https://github.com/jpirok/Typescript-jquery.inputmask
ou vous pouvez voir le code ci-dessous.
Il ne couvrira pas tous les cas pour jquery.inputmask, mais le traitera probablement le plus.
/// interface JQueryInputMaskOptions { mask?: ssortingng; alias?: ssortingng; placeholder?: ssortingng; repeat?: number; greedy?: boolean; skipOptionalPartCharacter?: ssortingng; clearIncomplete?: boolean; clearMaskOnLostFocus?: boolean; autoUnmask?: boolean; showMaskOnFocus?: boolean; showMaskOnHover?: boolean; showToolTip?: boolean; isComplete?: (buffer, options) => {}; numeric?: boolean; radixPoint?: ssortingng; rightAlignNumerics?: boolean; oncomplete?: (value?: any) => void; onincomplete?: () => void; oncleared?: () => void; onUnMask?: (maskedValue, unmaskedValue) => void; onBeforeMask?: (initialValue) => void; onKeyValidation?: (result) => void; onBeforePaste?: (pastedValue) => void; } interface inputMaskStatic { defaults: inputMaskDefaults; isValid: (value: ssortingng, options: inputMaskStaticDefaults) => boolean; format: (value: ssortingng, options: inputMaskStaticDefaults) => boolean; } interface inputMaskStaticDefaults { alias: ssortingng; } interface inputMaskDefaults { aliases; definitions; } interface JQueryStatic { inputmask: inputMaskStatic; } interface JQuery { inputmask(action: ssortingng): any; inputmask(mask: ssortingng, options?: JQueryInputMaskOptions): JQuery; }
Avant de créer votre propre fichier .d.ts
pour le plug-in, vous devriez vérifier s’il s’agit déjà d’une bibliothèque DefinitelyTyped . Par exemple, en utilisant Typings , vous pouvez exécuter la commande:
typings install dt~bootstrap --global --save
… et sans code supplémentaire, vous aurez access aux différents plugins Bootstrap.
S’ils n’ont pas le plug-in que vous recherchez, envisagez de consortingbuer votre propre définition.
L’utilisation d’un fichier de déclaration .d.ts
est probablement meilleure, mais vous pouvez également utiliser l’ augmentation globale et la déclaration de typeScript pour append des méthodes à l’interface de JQuery. Vous pouvez placer ce qui suit dans l’un de vos fichiers TypeScript:
declare global { interface JQuery { nameOfPluginMethod(arg: any): JQuery; } }