Come faccio è necessario il modulo AMD jquery per il mio modulo dattiloscritto. Per esempio diciamo che la struttura delle directory per gli script simile a questa:
jquery-1.8.2.js
jquery.d.ts
module.ts
require.js
Voglio che il file generato da js module.ts richiedere jquery-1.8.2.js essere caricato tramite require.js.
Attualmente ho:
importazione jquery = modulo ( 'jQuery')
Ciò si traduce in Il nome jquery non esiste nell'ambito corrente.
Sembra normale sta cambiando di nuovo, in cui il metodo seguito 0.9+ funziona ancora, ma con ES6 venire il modulo seguente carico potrebbe essere utilizzato. (riferimento: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
e anche parziali
import {extend} from "jquery";
(questo richiede ancora i jquery.d.ts, se è installato TSD - tsd install jquery)
installare tsd: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
E inoltre, se i vostri jquery.d.ts non definiscono un modulo esterno, aggiungere quanto segue al jquery.d.ts:
declare module "jquery" {
export = $;
}
Penso che un sacco di confusione intorno a questo è dovuto al jQuery non proprio agire come un modulo esterno, che inibisce l'uso di un importcomunicato. La soluzione è abbastanza pulito, semplice e abbastanza da non sentire come un work-around elegante.
Ho scritto un semplice esempio di utilizzo RequireJS e jQuery a macchina , che funziona come segue ...
Si afferra le definizioni del tipo da Decisamente tipizzati per RequireJS e jQuery.
È ora possibile utilizzare RequireJS prime con tipizzazione statica all'interno del file dattiloscritto.
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.');
});
});
E poi avete solo bisogno di aggiungere il tag singolo script alla pagina:
<script data-main="app" src="require.js"></script>
I vantaggi rispetto ad altre soluzioni?
.d.tsprogramma per)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'
}
});
In primo luogo ottenere il ( require-jquery ) dal repo ufficiale github. Dopo questo la directory sarà simile:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Attualmente il modo più semplice per lavorare con i moduli JQuery e AMD sul dattiloscritto è quello di scrivere la seguente sui main.ts:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
E chiamare dal proprio 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>
Spero che questo ti aiuti!
Si fa riferimento a moduli esterni di percorso e il nome (meno l'estensione .js), o semplicemente per nome di file se sono globali. Nel tuo caso, si dovrebbe fare questo all'interno di module.ts:
import jquery = module('./jquery-1.8.2');
Ricordatevi di compilare con --module AMDpoiché per impostazione predefinita si otterrà il codice che utilizza la commonjs requirefunzioni.