¿Cómo requiero el módulo AMD jQuery para mi módulo de mecanografiado. Por ejemplo, digamos estructura de directorios para las escrituras se ve así:
jquery-1.8.2.js
jquery.d.ts
module.ts
require.js
Quiero que el archivo generado a partir de JS module.ts para requerir jquery-1.8.2.js ser cargado a través de require.js.
Actualmente tengo:
importación jquery = módulo ( 'jquery')
Esto da como resultado el nombre de jQuery no existe en el ámbito actual.
Se ve como norma está cambiando de nuevo, en el que el método siguiente 0.9+ todavía funciona, pero con ES6 viene la carga siguiente módulo podría utilizarse. (Referencia: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
e incluso las parciales
import {extend} from "jquery";
(esto todavía requiere los jquery.d.ts, si se ha instalado TSD - tsd install jquery)
instalar TSD: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
Y también, si sus jquery.d.ts no definen un módulo externo, añada lo siguiente a jquery.d.ts:
declare module "jquery" {
export = $;
}
Creo que mucha de la confusión en torno a esto se debe a jQuery realmente no actuar como un módulo externo, lo cual inhibe el uso de un importcomunicado. La solución es bastante limpio, simple y suficiente para no sentirse como una solución alternativa elegante.
He escrito un ejemplo sencillo de uso de RequireJS y jQuery a máquina , que funciona de la siguiente manera ...
Que agarrar las definiciones de tipo de duda con tipo de RequireJS y jQuery.
Ahora puede utilizar RequireJS primas con tipos estáticos dentro del fichero de transcripción.
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.');
});
});
Y a continuación, sólo tiene que añadir la etiqueta script sola a su página:
<script data-main="app" src="require.js"></script>
Ventajas sobre otras soluciones?
.d.tsarchivo para)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'
}
});
En primer lugar obtener la ( require-jquery ) desde el repositorio oficial de GitHub. Después de esto su directorio se verá así:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Actualmente, la forma más fácil de trabajar con módulos de jQuery y AMD en texto mecanografiado es escribir lo siguiente en los main.ts:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
Y llamarlo desde su 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>
¡Espero que esto ayude!
Se hace referencia a módulos externos de ruta y el nombre (menos la extensión .js), o simplemente por nombre de archivo si son globales. En su caso, usted debe hacer esto dentro de module.ts:
import jquery = module('./jquery-1.8.2');
Recuerde que debe compilar con --module AMDya que por defecto obtendrá código que utiliza el CommonJS requirefunción.