Cum am nevoie de modulul AMD pentru jQuery modul meu dactilografiate. De exemplu, să presupunem că structura de directoare pentru script-uri arata ca acest lucru:
jQuery-1.8.2.js
jquery.d.ts
module.ts
require.js
Vreau fișierul generat js din module.ts de a solicita jquery-1.8.2.js fi încărcate prin intermediul require.js.
În prezent am:
import jquery = modulul ( 'jquery')
Aceasta are ca rezultat Numele „jQuery“ nu există în domeniul de aplicare curent.
Se pare ca standard , se schimbă din nou, în cazul în care metoda de mai jos 0.9+ încă mai funcționează, dar cu ES6 vine următoarea încărcare modul ar putea fi utilizat. (referință: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
și chiar și cele parțiale
import {extend} from "jquery";
(acest lucru necesită în continuare jquery.d.ts, în cazul în care este instalat TSD - tsd install jquery)
pentru a instala TSD: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
Și, de asemenea, în cazul în care jquery.d.ts dumneavoastră nu definesc un modul extern, se adaugă următoarele la jquery.d.ts:
declare module "jquery" {
export = $;
}
Cred că o mulțime de confuzie în jurul valorii de acest lucru se datorează jQuery într - adevăr nu acționează ca un modul extern, care inhibă utilizarea unei importdeclarații. Soluția este destul de curat, simplu și nu suficient să se simtă ca o lucrare în jurul valorii de elegant.
Am scris un simplu exemplu de Folosind RequireJS și jQuery dactilografiat , care funcționează după cum urmează ...
Iei definițiile de tip de la Categoric tastate pentru RequireJS și jQuery.
Puteți utiliza acum RequireJS prime cu tastarea statică în interiorul fișierului dactilografiate.
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 atunci ai nevoie doar pentru a adăuga tag-ul script unic la pagina ta:
<script data-main="app" src="require.js"></script>
Beneficii peste alte soluții?
.d.tsfișier pentru)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'
}
});
În primul rând a obține ( necesită-jQuery ) de la repo oficial GitHub. După acest director va arata:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
În prezent, cel mai simplu mod de a lucra cu module JQuery si AMD pe typescript este de a scrie următoarele în main.ts:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
Și suna la test.html tau:
<!DOCTYPE html>
<html>
<head>
<script data-main="main" src="require-jquery.js"></script>
</head>
<body>
<h1>TypeScript JQuery AMD test</h1>
</body>
</html>
Sper că acest lucru vă ajută!
Sunteți de referință module externe pe calea și numele (minus extensia .js), sau doar prin nume de fișier, dacă acestea sunt la nivel mondial. In cazul tau, ar trebui să faceți acest lucru în interiorul module.ts:
import jquery = module('./jquery-1.8.2');
Nu uitați să compilați cu , --module AMDdeoarece implicit veți obține codul care utilizează commonjs requirefuncția.