web-dev-qa-db-fra.com

TypeScript et bibliothèques telles que jQuery (avec des fichiers .d.ts)

J'ai parcouru tous les réseaux Internet, mais je n'ai pas encore trouvé de guide complet qui explique comment utiliser une bibliothèque telle que jquery et l'utiliser dans un projet TypeScript. S'il existe un guide, j'aimerais savoir où, sinon, ce sont les choses que j'ai vraiment besoin de savoir:

  1. Je comprends que le fichier .d.ts est uniquement destiné à intellisense, de quoi ai-je besoin pour que jquery fonctionne réellement (compile en ts?)
  2. Ai-je besoin d'une requires ou d'un //reference lorsque j'utilise VS2013 et si oui que fait-il réellement?
  3. N'importe quoi pour passer de ces fichiers .d.ts et jquery js à l'utilisation de la bibliothèque (ou de n'importe quelle bibliothèque) dans mon projet ts.

J'ai pu comprendre à peu près tout le reste, mais celui-ci a été plutôt frustrant.

javascriptjquerytypescript
30
dlkulp

Vous n'avez pas besoin de compiler jquery pour TypeScript, vous devez simplement utiliser un fichier de définition qui indique à TypeScript comment fonctionne la bibliothèque JavaScript.

Obtenez les définitions ici: https://github.com/DefinitelyTyped/DefinitelyTyped

ou de NuGet si vous utilisez Visual Studio.

Ensuite, écrivez votre TypeScript normalement et déclarez votre bibliothèque si nécessaire:

declare var library : libraryTypedName

par exemple, le fichier d.ts de jquery le fait déjà pour vous (vérifiez en bas):

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery

Maintenant, dans votre fichier .ts, lorsque vous tapez $, vous devriez obtenir le TypeScript intellisense.

Désormais, les seuls éléments que vous souhaitez inclure dans votre bundleconfig/<script> sont les fichiers .js, les vôtres et les bibliothèques jquery/other. TypeScript est le temps COMPILE seulement!

21
John

La convention dans TypeScript consiste à avoir un fichier reference.ts ou reference.d.ts dans votre projet, qui introduira ces références externes.

Donc, dans votre fichier reference.ts, ajoutez le chemin d'accès à votre jquery.d.ts (le chemin sera relatif au fichier reference.ts):

/// <reference path="../relative/path/to/jquery.d.ts"/>

Ensuite, vous devriez pouvoir utiliser les définitions jQuery dans votre projet.

REMARQUE: le fichier reference.ts est une convention, mais vous pouvez en fait ajouter une directive <reference path="..."/> à tout fichier TypeScript si nécessaire.

À partir du Spécification du langage TypeScript (PDF) 11.1.1:

Un commentaire de la forme /// <reference path="…"/> ajoute une dépendance sur le fichier source spécifié dans l'argument path. Le chemin est résolu par rapport au répertoire du fichier .__ contenant. fichier source.

10
Sly_cardinal

Je l'utilise dans VS 2015 et je suis nouveau dans TypeScript.J'ai utilisé jQuery et un dépliant dans mon projet. Ma solution est:

  1. Téléchargez toutes ces librairies du gestionnaire NuGet dans VS 2015 .  enter image description here

  2. Faites glisser les fichiers de bibliothèque (.js) comme indiqué dans ce tutoriel:

https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

  1. Modifiez le fichier index.html en ajoutant ces lignes.

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/leaflet.css" />

<script src="scripts/jquery-2.2.3.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/leaflet-0.7.3.min.js"></script>

  2. Modifiez le fichier index.ts. Commencez par ajouter ces lignes pour référencer vos bibliothèques. Vous devrez peut-être changer le chemin.

     enter image description here

  3. Ajoutez votre code gagné dans onDeviceReady (), sinon vous pourriez avoir une erreur d'exécution javascript, comme sysmbol "$" n'est pas défini J'imagine que c'est parce que les codes essaient de charger une fonction lorsque l'appareil n'est pas encore prêt. Cela a fonctionné pour moi. J'espère que cela vous aidera aussi.

        function onDeviceReady() {

    document.addEventListener('pause', onPause, false);
    document.addEventListener('resume', onResume, false);


    var parentElement = document.getElementById('deviceready');
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    // your code goes here

    }
7
Luo Lei

cette solution n'est pas destinée aux puristes de TypeScript :), mais si vous préférez une solution à une ligne, ajoutez simplement cette ligne à votre fichier .ts:

declare var $: any

utilisez ensuite $ n'importe où dans votre code TypeScript comme si vous étiez dans le code js.

0
Peter