requirejs - Cómo requerir jquery a través de AMD en TypeScript

Question

¿Cómo necesito el módulo jquery AMD para mi módulo TypeScript? Por ejemplo, digamos que la estructura de directorios para los scripts se ve así:

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

Quiero que el archivo js generado de module.ts requiera que jquery-1.8.2.js se cargue a través de require.js.

Actualmente tengo:

import jquery = module(''jquery'')

Esto da como resultado que el nombre "jquery" no existe en el ámbito actual.

Answer 1

PARA TIPOSCRIPT 1.7+

Parece que el estándar está cambiando de nuevo, donde el método por debajo de 0.9+ aún funciona, pero con ES6 que viene, se podría usar la siguiente carga del módulo. (referencia: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )

import * as $ from "jquery";

e incluso los parciales

import {extend} from "jquery"; 

(Esto aún requiere jquery.d.ts, si tsd está instalado - tsd install jquery )

para instalar tsd: npm install tsd -g

PARA TIPOSCRIPT 0.9+

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

//Do your stuff

Y también, si su jquery.d.ts no define un módulo externo, agregue lo siguiente a jquery.d.ts:

declare module "jquery" {
    export = $;
}

Answer 2

1. Tome el jquery.d.ts básico de la fuente de TS ( TypeScriptFile )
2. Mueva las declaraciones () de JQueryStatic a un módulo como este:
3. en tu módulo de código importa el 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;
}

4. Compila tu módulo como AMD (tsc --module amd my_code.ts)
5. Utilice requirejs para componer su aplicación en el lado del cliente con la siguiente sección de configuración:

requirejs.config({
   paths: {
      ''jquery'': ''js/jquery-1.8.2.min''
   }
});

Answer 3

Creo que gran parte de la confusión en torno a esto se debe a que jQuery realmente no actúa como un módulo externo, lo que impide el uso de una declaración de import . La solución es bastante limpia, simple y lo suficientemente elegante como para no sentirse como una solución alternativa.

He escrito un ejemplo simple de Uso de RequireJS y jQuery en TypeScript , que funciona de la siguiente manera ...

Puede capturar las definiciones de tipo de Definitely Typed for RequireJS y jQuery.

Ahora puede usar RequireJS sin formato con escritura estática dentro del archivo 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.'');
    });
});

Y luego solo necesita agregar la etiqueta de secuencia de comandos única a su página:

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

¿Beneficios sobre otras soluciones?

1. Puedes actualizar jQuery y RequireJS independientemente
2. No tienes que depender de que el proyecto shim se actualice.
3. No tiene que cargar manualmente jQuery (o cualquier otra cosa que no sea "como un módulo" para la que tiene un archivo .d.ts )

Answer 4

Hace referencia a módulos externos por ruta y nombre de archivo (menos la extensión .js), o simplemente por nombre de archivo si son globales. En su caso, debe hacer esto dentro de module.ts:

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

Recuerde compilar con --module AMD ya que, de forma predeterminada, obtendrá un código que utiliza la función commonjs require .

Answer 5

Primero obtenga el ( require-jquery ) del repositorio oficial de github. Después de esto su directorio se verá como:

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

Actualmente, la forma más sencilla de trabajar con los módulos JQuery y AMD en TypeScript es escribir lo siguiente en main.ts:

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

Y llámalo desde tu 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!