Jak mogę wymagać jQuery moduł AMD dla mojego modułu maszynopis. Na przykład załóżmy, że struktura katalogów skryptów wygląda następująco:
jQuery 1.8.2.js
jquery.d.ts
module.ts
require.js
Chcę wygenerowany plik js z module.ts wymagać jquery-1.8.2.js być ładowane poprzez require.js.
Obecnie mam:
importu jQuery = moduł ( 'jQuery')
Powoduje to nazwa „jQuery” nie istnieje w bieżącym zakresie.
To wygląda jak standardowy zmienia się ponownie, gdzie poniżej 0.9+ metoda wciąż działa, ale z ES6 przyjście moduł następujące ładowania mogą być wykorzystane. (odnośnik: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
a nawet te częściowe
import {extend} from "jquery";
(to wciąż wymagają jquery.d.ts, jeśli jest zainstalowany TSD - tsd install jquery)
zainstalować TSD: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
A także, jeśli jquery.d.ts nie definiują modułu zewnętrznego, dodać następujące jquery.d.ts:
declare module "jquery" {
export = $;
}
Myślę, że dużo zamieszania wokół tego wynika jQuery nie naprawdę zachowuje się jak zewnętrzny moduł, który hamuje zastosowanie importrachunku. Rozwiązanie jest dość czyste, proste i wystarczy, aby nie czuć się jak obejść eleganckie.
Pisałem nawet prosty przykład Korzystanie RequireJS i jQuery w maszynopisie , który działa w następujący sposób ...
Chwycić definicji typu z pewnością typizowanych dla RequireJS i jQuery.
Można teraz używać surowych RequireJS ze statycznego typowania wewnątrz pliku maszynopisu.
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.');
});
});
A potem trzeba tylko dodać jeden tag skryptu na swojej stronie:
<script data-main="app" src="require.js"></script>
Korzyści w stosunku do innych rozwiązań?
.d.tsplik o)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'
}
});
Najpierw uzyskać ( require-jquery ) z oficjalnego repo github. Po tym katalogiem będzie wyglądać następująco:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Obecnie najprostszym sposobem, aby pracować z modułami jQuery i AMD na maszynopis jest napisać następujące na main.ts:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
I nazywają go z 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>
Mam nadzieję że to pomoże!
Odwołać zewnętrznych modułów, których autorem jest ścieżka i nazwa pliku (minus rozszerzeniem .js), albo po prostu przez nazwę pliku, jeśli są globalne. W twoim przypadku, należy zrobić to wewnątrz module.ts:
import jquery = module('./jquery-1.8.2');
Pamiętaj, aby skompilować --module AMDponieważ domyślnie dostaniesz kod, który używa commonjs requirefunkcję.