2012-10-06 2 views
16

Come richiedere il modulo AMD jQuery per il mio modulo TypeScript. Per esempio diciamo che la struttura delle directory per gli script simile a questo:Come richiedere jquery tramite AMD in TypeScript

 

    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:

 

    import jquery = module('jquery') 

Questo si traduce in Il nome "jquery" non esiste nell'ambito corrente.

risposta

1

Prima ottenere il (require-jquery) dal repository github ufficiale. 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 il seguente sulle main.ts:

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

e chiamarlo dal your 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 aiuti!

+0

Questo non è per Main.ts o Main.js. Ho bisogno di un modulo (module.ts) per richiedere e caricare jquery e avere ancora Module.ts visto da Typescript come un modulo separato. La tua soluzione sembra funzionare per il mio punto di ingresso, ma ho bisogno di richiedere jquery nei moduli che non sono il punto di ingresso. –

+0

È possibile applicare la stessa logica al resto del jquery-require-sample sulla pagina github: https://github.com/jrburke/require-jquery/tree/master/jquery-require-sample Basta cambiare il requisito dichiarazione e sei pronto per andare –

+1

@ Murat - Si suppone che abbozzato Typ per essere in grado di generare le istruzioni require per te con le istruzioni del modulo. Mi sento sporco a fare questo :) –

6
  1. Prendete i jquery.d.ts di base dalla sorgente TS (TypeScriptFile)
  2. Spostare i() dichiarazioni del JQueryStatic in un modulo come questo:
  3. nel modulo di codice di importazione del 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. Utilizzare requirejs per comporre la vostra applicazione sul lato client con la seguente sezione di configurazione:

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

Almeno questo funziona. Speriamo di poter aggiornare il file jquery.d.ts in https://github.com/Diullei/tsd in modo che corrispondano. –

0

Si fa riferimento a moduli esterni da percorso e il nome (meno l'estensione .js) , o solo per nome se sono globali. Nel tuo caso, si dovrebbe fare questo all'interno di module.ts:

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

Ricordati di compilare con --module AMD poiché per impostazione predefinita si otterrà il codice che utilizza le funzioni require commonjs.

+0

Non penso che funzioni, perché jquery.d.ts non dichiara un modulo jquery esterno: 'declare module" jquery "{}'. Dichiara solo le variabili globali –

8

Penso che gran parte della confusione su questo è dovuta a jQuery che non agisce proprio come un modulo esterno, che inibisce l'uso di un'istruzione import. La soluzione è abbastanza pulita, semplice ed elegante da non sembrare un work-around.

Ho scritto un semplice esempio di Using RequireJS and jQuery in TypeScript, che funziona come segue ...

si afferra le definizioni del tipo da Definitely Typed per RequireJS e jQuery.

Ora è possibile utilizzare RequireJS non elaborato con la tipizzazione statica all'interno del file 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.'); 
    }); 
}); 

e quindi è solo bisogno di aggiungere il tag singolo script alla pagina:

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

vantaggi rispetto ad altre soluzioni?

  1. È possibile aggiornare jQuery e RequireJS indipendentemente
  2. Non dovete fare affidamento su progetto di spessore in fase di aggiornamento
  3. Lei non c'è bisogno di caricare manualmente jQuery (o qualsiasi altra cosa che non è "come un modulo" che si dispone di un file .d.ts per)
+0

che richiedono js sul repository. Non riesco a trovare – atilkan

+1

@emrah È qui: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/requirejs/require.d.ts – Fenton

26

pER dattiloscritti 1.7+

sembra normale sta cambiando di nuovo, in cui il metodo seguito 0.9+ funziona ancora, ma con ES6 in arrivo potrebbe essere utilizzato 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"; 

(questa ancora richiede i jquery.d.ts, se è installato tsd - tsd install jquery)

da installare tsd: npm install tsd -g

PER TYPESCRIPT 0.9+

/// <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 jquery.d.ts:

declare module "jquery" { 
    export = $; 
} 
+0

Se provo, ottengo errori: Impossibile risolvere il modulo esterno '' jquery '' . e il modulo non può essere alterato in un tipo non modulo. – ghost23

+0

Sembra che tu non abbia il modulo di dichiarazione "jquery" in jquery.d.ts. –

+0

Trovato il problema, era qualcosa di completamente diverso: la mia libreria jQuery si chiama "jquery-1.9.1" * facepalm * – ghost23