Lors de l'utilisation tapuscrit ai-je besoin d'importer un plugin.d.ts pour tous les js externes que j'utiliser? En d'autres termes, dois-je créer un jQuery.d.ts avec toutes les interfaces?
En utilisant le plugin jQuery dactylographiée
voix
66
5 réponses
voix 98
98
Le problème avec les plugins jQuery (et d'autres bibliothèques à base de plug-in) est que non seulement avez-vous besoin d'un fichier library.d.ts pour la bibliothèque de base, mais vous avez aussi besoin d'un fichier plugin.d.ts pour chaque plug-in. Et en quelque sorte Thes plugin.d.ts fichiers doivent étendre les interfaces de bibliothèque définies dans les fichiers library.d.ts. Heureusement, tapuscrit a une petite fonctionnalité intéressante qui vous permet de le faire.
Avec classesActuellement , il ne peut être qu'une seule définition cononical d'une classe au sein d' un projet. Donc , si vous définissez un des class Foomembres que vous mettez sur Foosont tout ce que vous obtenez. Les définitions supplémentaires Fooentraîneront une erreur. Avec interfaces, cependant, les membres sont additifs que si vous définissez interface Baravec un ensemble d'éléments que vous pouvez définir une deuxième fois « barre d'interface » pour ajouter des membres supplémentaires au interface. C'est la clé pour soutenir les plugins jQuery d'une manière fortement typé.
Donc , pour ajouter le support pour un plugin jQuery donné que vous allez avoir besoin de créer un fichier plugin.d.ts pour le plug - in que vous souhaitez utiliser. Nous utilisons jQuery Templates dans notre projet est ici si le fichier jquery.tmpl.d.ts que nous avons créé pour ajouter le support pour ce plug - in:
interface JQuery
{
tmpl(data?:any,options?:any): JQuery;
tmplItem(): JQueryTmplItem;
template(name?:string): ()=>any;
}
interface JQueryStatic
{
tmpl(template:string,data?:any,options?:any): JQuery;
tmpl(template:(data:any)=>string,data?:any,options?:any): JQuery;
tmplItem(element:JQuery): JQueryTmplItem;
tmplItem(element:HTMLElement): JQueryTmplItem;
template(name:string,template:any): (data:any)=>string[];
template(template:any): JQueryTemplateDelegate;
}
interface JQueryTemplateDelegate {
(jQuery: JQueryStatic, data: any):string[];
}
interface JQueryTmplItem
{
data:any;
nodes:HTMLElement[];
key:number;
parent:JQueryTmplItem;
}
Briser ce bas la première chose que nous avons fait est de définir les méthodes qui sont ajoutés à l' JQueryinterface. Ceux - ci vous permettent d' obtenir IntelliSense et tapez vérifier lorsque vous tapez $('#foo').tmpl();suivant , nous avons ajouté des méthodes à l' JQueryStaticinterface qui apparaissent lorsque vous tapez $.tmpl();Et enfin , le jQuery Templates plug - in définit certaines de ses propres structures de données, nous avions besoin de définir des interfaces pour ces structures.
Maintenant que nous avons les interfaces supplémentaires que nous definied avons juste besoin de les référencer des fichiers .ts consommateurs. 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, tapuscrit verra la fois la base des méthodes jQuery et les méthodes de plug-in. Si vous utilisez plusieurs plugins juste se assurer que vous refernce tous vos fichiers individuels de plugin.d.ts et vous devriez être bon.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
voix 4
4
Enregistrement d'un fichier .ts ne déclenche pas automatiquement la compilation dans Visual Studio. Vous aurez besoin de construire / reconstruire pour déclencher la compilation.
Déclarez fichiers (file.d.ts) permet au compilateur dactylographiée obtenir de meilleures informations de type sur les bibliothèques JavaScript que vous utilisez dans ce fichier. Vous pouvez avoir vos interfaces définies en 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.
voix 3
3
J'ai cherché un d.ts pour jquery.inputmask et enfin créé un simple de mon propre. C'est à
https://github.com/jpirok/Typescript-jquery.inputmask
ou vous pouvez voir le code ci-dessous.
Il ne couvre pas tous les cas pour jquery.inputmask, mais probablement traiter la plupart.
///<reference path="../jquery/jquery.d.ts" />
interface JQueryInputMaskOptions {
mask?: string;
alias?: string;
placeholder?: string;
repeat?: number;
greedy?: boolean;
skipOptionalPartCharacter?: string;
clearIncomplete?: boolean;
clearMaskOnLostFocus?: boolean;
autoUnmask?: boolean;
showMaskOnFocus?: boolean;
showMaskOnHover?: boolean;
showToolTip?: boolean;
isComplete?: (buffer, options) => {};
numeric?: boolean;
radixPoint?: string;
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: string, options: inputMaskStaticDefaults) => boolean;
format: (value: string, options: inputMaskStaticDefaults) => boolean;
}
interface inputMaskStaticDefaults {
alias: string;
}
interface inputMaskDefaults {
aliases;
definitions;
}
interface JQueryStatic {
inputmask: inputMaskStatic;
}
interface JQuery {
inputmask(action: string): any;
inputmask(mask: string, options?: JQueryInputMaskOptions): JQuery;
}
voix 2
2
Avant de créer votre propre .d.tsfichier pour le plug - in, vous devriez vérifier pour voir si elle est déjà en DefinitelyTyped bibliothèque. Par exemple, en utilisant typages , vous pouvez exécuter la commande suivante :
typings install dt~bootstrap --global --save
... et sans code supplémentaire que vous aurez accès aux différents plugins Bootstrap.
Si elles ne sont pas le plug-in que vous cherchez, pensez à contribuer à votre propre définition.
voix 0
0
L' utilisation d' un .d.tsfichier de déclaration est sans doute mieux, mais comme alternative , vous pouvez également utiliser de tapuscrit fusion augmentation globale et la déclaration d'ajouter des méthodes à l'interface de JQuery. Vous pouvez placer quelque chose comme ce qui suit dans l' un de vos fichiers tapuscrit:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}