Comment puis-je requiers le module AMD jquery pour mon module dactylographiée. Par exemple, disons que la structure de répertoire 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 module.ts d'exiger jquery-1.8.2.js être chargé via require.js.
Actuellement, je suis:
import jquery = module ( 'jquery')
Il en résulte le nom « jquery » n'existe pas dans la portée actuelle.
Il semble que la norme est en train de changer à 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 partielles
import {extend} from "jquery";
(ce qui exige encore les jquery.d.ts, si DNT est installé - tsd install jquery)
installer DNT: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
Et aussi, si vos jquery.d.ts ne définissent pas un module externe, ajoutez ce qui suit à jquery.d.ts:
declare module "jquery" {
export = $;
}
Je pense que beaucoup de confusion autour de cela est dû à jQuery pas vraiment agir comme un module externe, ce qui empêche l'utilisation d'une importdéclaration. La solution est tout à fait propre, simple et assez élégant pour ne pas se sentir comme un travail autour.
Je l' ai écrit un exemple simple d' utilisation de RequireJS et jQuery dactylographiée , qui fonctionne comme suit ...
Vous prenez les définitions de type de Definitely typées pour RequireJS et jQuery.
Vous pouvez maintenant utiliser RequireJS premières avec le typage statique à l'intérieur du fichier dactylographiée.
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.');
});
});
Et puis il vous suffit d'ajouter la balise unique de script à votre page:
<script data-main="app" src="require.js"></script>
Les avantages par rapport aux autres solutions?
.d.tsfichier)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;
}
requirejs.config({
paths: {
'jquery': 'js/jquery-1.8.2.min'
}
});
Tout d' abord obtenir le ( require-jquery ) du repo GitHub officiel. Après ce votre répertoire ressemblera:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
À l'heure actuelle la meilleure façon de travailler avec des modules JQuery et AMD sur tapuscrit est d'écrire ce qui suit sur les main.ts:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
Et l'appeler de 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!
Vous faites référence à des modules externes par chemin et le nom (moins l'extension .js), ou tout simplement par nom de fichier si elles sont globales. Dans votre cas, vous devriez le faire à l'intérieur de module.ts:
import jquery = module('./jquery-1.8.2');
Rappelez - vous de compiler avec --module AMDdepuis par défaut , vous obtenez le code qui utilise la CommonJS requirefonction.