Come richiedere jquery tramite AMD in TypeScript

Come richiedo il modulo jQuery AMD per il mio modulo TypeScript. Ad esempio, supponiamo che la struttura delle directory per gli script assomigli a questa:

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

Voglio il file js generato da module.ts per richiedere jquery-1.8.2.js essere caricato tramite require.js.

Attualmente ho:

     importare jquery = module ('jquery') 

Ciò si traduce in Il nome “jquery” non esiste nell’ambito corrente.

PER TYPESCRIPT 1.7+

Sembra che lo standard stia cambiando di nuovo, dove il metodo sotto 0.9+ funziona ancora, ma con ES6 in arrivo potrebbe essere usato il seguente modulo di caricamento. (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 jquery.d.ts, se tsd è installato – tsd install jquery )

per installare tsd: npm install tsd -g

PER TYPESCRIPT 0.9+

 ///  import $ = require('jquery'); //Do your stuff 

Inoltre, se jquery.d.ts non definisce un modulo esterno, aggiungi quanto segue a jquery.d.ts:

 declare module "jquery" { export = $; } 

Penso che gran parte della confusione in merito sia dovuta al fatto che jQuery non agisce proprio come un modulo esterno, che inibisce l’uso di una dichiarazione di import . La soluzione è abbastanza pulita, semplice ed elegante da non sembrare un work-around.

Ho scritto un semplice esempio di utilizzo di RequireJS e jQuery in TypeScript , che funziona come segue …

Ottieni le definizioni di tipo da Definitely Typed for RequireJS e jQuery.

Ora è ansible utilizzare RequireJS non elaborato con la tipizzazione statica all’interno del file TypeScript.

app.ts

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

E poi hai solo bisogno di aggiungere il singolo tag script alla tua pagina:

  

Vantaggi rispetto ad altre soluzioni?

  1. È ansible aggiornare jQuery e RequireJS in modo indipendente
  2. Non devi fare affidamento sul progetto di shim che viene aggiornato
  3. Non devi caricare manualmente jQuery (o qualsiasi altra cosa che non sia “come un modulo” per cui hai un file .d.ts )
  1. Prendi il jquery.d.ts di base dall’origine TS ( TypeScriptFile )
  2. Sposta le dichiarazioni () di JQueryStatic in un modulo come questo:
  3. nel tuo modulo di codice importa 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. Compilare il modulo come AMD (tsc –module amd my_code.ts)
  2. Usa requirejs per comporre la tua app sul lato client con la seguente sezione di configurazione:

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

Per prima cosa prendi ( require-jquery ) dal repository github ufficiale. Dopo questo la tua directory sarà simile a:

 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 su TypeScript è scrivere quanto segue su main.ts:

 /// declare var require; require(["jquery"], function($:JQueryStatic) { $('body').append('Hello JQuery AMD!'); }); 

E chiamalo dal tuo test.html:

       

TypeScript JQuery AMD test

Spero che questo ti aiuti!

Si fa riferimento a moduli esterni per percorso e nome file (meno l’estensione .js) o solo per nome file se sono globali. Nel tuo caso, dovresti farlo all’interno di module.ts:

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

Ricorda di compilare con --module AMD dato che di default otterrai il codice che usa la funzione commonjs require .