requirejs - Cum să imporți jquery prin AMD în TypeScript

Cum pot să solicit modulul jquery AMD pentru modulul meu TypeScript. De exemplu, să spunem că structura directorului pentru scripturi arată astfel:


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

Vreau ca fișierul js generat din module.ts să necesite jquery-1.8.2.js și să fie încărcat prin require.js.

În prezent am:


    import jquery = module('jquery')

Acest lucru duce la Numele "jquery" nu există în domeniul curent.

Răspuns #1

PENTRU TYPESCRIPT 1.7+

Se pare că standardul se schimbă din nou, unde metoda de mai jos 0.9+ încă funcționează, dar odată cu apariția ES6, următoarea încărcare a modulelor ar putea fi utilizată. (referință: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105)

import * as $ from "jquery";

și chiar parțiale

import {extend} from "jquery";

(acest lucru necesită în continuare jquery.d.ts, dacă tsd este instalat - tsd install jquery)

pentru a instala tsd: npm install tsd -g

PENTRU TYPESCRIPT 0.9+

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

//Do your stuff

Și de asemenea, dacă jquery.d.ts nu definește un modul extern, adaugă următoarele în jquery.d.ts:

declare module "jquery" {
    export = $;
}

Răspunsul #2

Cred că o mare parte din confuzia legată de acest lucru se datorează faptului că jQuery nu se comportă cu adevărat ca un Modul Extern, ceea ce împiedică utilizarea unei declarații import. Soluția este destul de curată, simplă și suficient de elegantă încât să nu pară un improvizat.

Am scris un exemplu simplu de utilizare a RequireJS și jQuery în TypeScript, care funcționează după cum urmează...

Preiei definițiile de tip din Definitely Typed pentru RequireJS și jQuery.

Acum poți folosi RequireJS simplu cu tipizare statică în interiorul fișierului 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.');
    });
});

Și apoi trebuie doar să adaugi un singur tag script în pagina ta:

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

Beneficii față de alte soluții?

  1. Poți să actualizezi jQuery și RequireJS independent
  2. Nu trebuie să te bazezi pe actualizarea proiectului shim
  3. Nu trebuie să încarci jQuery manual (sau altceva care nu este „ca un modul” pentru care ai un fișier .d.ts)