web-dev-qa-db-fra.com

Comment requérir jquery via AMD dans TypeScript

Comment ai-je besoin du module AMD jquery pour mon module TypeScript? Par exemple, disons que la structure des répertoires pour les scripts ressemble à ceci:

 
 jquery-1.8.2.js 
 jquery.d.ts 
 module.ts 
 require.js

Je veux que le fichier js généré à partir de module.ts nécessite que jquery-1.8.2.js soit chargé via require.js.

Actuellement j'ai:

 
 importer jquery = module ('jquery')

Cela se traduit par Le nom "jquery" n'existe pas dans la portée actuelle.

requirejstypescript
16
Mizzle-Mo

POUR TypeScript 1.7+

Il semble que la norme change à nouveau, où la méthode ci-dessous 0.9+ fonctionne toujours, mais avec ES6 à venir, le chargement du module suivant pourrait être utilisé. (référence: https://github.com/TypeStrong/atom-TypeScript/issues/237#issuecomment-90372105 )

import * as $ from "jquery";

et même partielle

import {extend} from "jquery";

(cela nécessite toujours le fichier jquery.d.ts, si tsd est installé - tsd install jquery)

installer tsd: npm install tsd -g

FOR TypeScript 0.9+

/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');

//Do your stuff

De plus, si votre jquery.d.ts ne définit pas de module externe, ajoutez ce qui suit à jquery.d.ts:

declare module "jquery" {
    export = $;
}
26
Poul K. Sørensen

Je pense qu'une grande partie de la confusion autour de cela est due au fait que jQuery n'agit pas vraiment comme un module externe, ce qui empêche l'utilisation d'un énoncé import. La solution est assez propre, simple et suffisamment élégante pour ne pas vous sentir mal à l'aise.

J'ai écrit un exemple simple de Utilisation de RequireJS et jQuery dans TypeScript , qui fonctionne comme suit ...

Vous récupérez les définitions de type dans Definitely Typed pour RequireJS et jQuery.

Vous pouvez maintenant utiliser le RequireJS brut avec le typage statique à l'intérieur du fichier TypeScript.

app.ts 

///<reference path="require.d.ts" />
///<reference path="jquery.d.ts" />

require(['jquery'], function ($) {
    $(document).ready(() => {
        alert('Your code executes after jQuery has been loaded.');
    });
});

Ensuite, il vous suffit d'ajouter la balise script unique à votre page:

<script data-main="app" src="require.js"></script>

Avantages par rapport à d'autres solutions?

  1. Vous pouvez mettre à jour jQuery et RequireJS indépendamment
  2. Vous n'avez pas à compter sur le projet shim mis à jour
  3. Vous n'avez pas besoin de charger manuellement jQuery (ou tout ce qui n'est pas "comme un module" pour lequel vous avez un fichier .d.ts)
8
Fenton
  1. Prenez le fichier jquery.d.ts de base de la source TS ( TypeScriptFile )
  2. Déplacez les déclarations () de JQueryStatic dans un module comme celui-ci:
  3. dans votre module de code, importez jQuery:
import $ = module("jquery");

declare module "jquery" {
   export function (selector: string, context?: any): JQuery;
   export function (element: Element): JQuery;
   export function (object: { }): JQuery;
   export function (elementArray: Element[]): JQuery;
   export function (object: JQuery): JQuery;
   export function (func: Function): JQuery;
   export function (): JQuery;
}
  1. Compilez votre module en tant que AMD (tsc --module AMD my_code.ts)
  2. Utilisez requirejs pour composer votre application côté client avec la section de configuration suivante:
requirejs.config({
   paths: {
      'jquery': 'js/jquery-1.8.2.min'
   }
});
6
IgorM

Commencez par obtenir le ( require-jquery ) auprès du dépôt officiel de github. Après cela, votre répertoire ressemblera à:

require-jquery.js
jquery.d.ts
main.ts
main.js
test.html

Actuellement, le moyen le plus simple de travailler avec les modules JQuery et AMD sur TypeScript consiste à écrire ce qui suit sur le fichier main.ts:

///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
    $('body').append('<b>Hello JQuery AMD!</b>');
});

Et appelez-le depuis votre test.html:

<!DOCTYPE html>
<html>
    <head>
        <script data-main="main" src="require-jquery.js"></script>
    </head>
    <body>
        <h1>TypeScript JQuery AMD test</h1>
    </body>
</html>

J'espère que cela t'aides!

1
Murat Sutunc

Vous référencez les modules externes par chemin et nom de fichier (sans l'extension .js), ou simplement par nom de fichier s'ils sont globaux. Dans votre cas, vous devriez le faire à l'intérieur de module.ts:

import jquery = module('./jquery-1.8.2');

N'oubliez pas de compiler avec --module AMD car, par défaut, vous obtiendrez du code utilisant la fonction commonjs require.

0
nxn