Hoe kan ik eisen dat de jQuery AMD module voor mijn typoscript module. Bijvoorbeeld laten we zeggen mapstructuur voor scripts ziet er als volgt uit:
jquery-1.8.2.js
jquery.d.ts
module.ts
require.js
Ik wil dat het bestand gegenereerd js van module.ts te eisen jQuery-1.8.2.js via require.js worden geladen.
Momenteel heb ik:
import jquery = module ( 'jquery')
Dit resulteert in De naam jQuery bestaat niet in de huidige scope.
Het lijkt erop dat standaard weer is aan het veranderen, waarbij de onderstaande 0.9+ methode werkt nog steeds, maar met ES6 komen de volgende module geladen kunnen worden gebruikt. (referentie: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
en zelfs gedeeltelijk degenen
import {extend} from "jquery";
(deze moeten nog de jquery.d.ts, als TSD is geïnstalleerd - tsd install jquery)
naar tsd installeren: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
En ook, als uw jquery.d.ts niet beschikt over een externe module te definiëren, voegt u de volgende jquery.d.ts:
declare module "jquery" {
export = $;
}
Ik denk dat veel van de verwarring rond dit is te wijten aan jQuery niet echt gedragen als een externe module, die het gebruik van een remt importverklaring. De oplossing is heel schoon, eenvoudig en elegant genoeg om niet te voelen als een work-around.
Ik heb geschreven een eenvoudig voorbeeld van het gebruik van RequireJS en jQuery in typoscript , die werkt als volgt ...
Je pakt het type definities uit Zeker Getypt voor RequireJS en jQuery.
U kunt nu ruwe RequireJS met statische typen binnenkant van het logbestand.
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.');
});
});
En dan hoeft u alleen de enkele script tag toe te voegen aan uw pagina:
<script data-main="app" src="require.js"></script>
Voordelen ten opzichte van andere oplossingen?
.d.tsbestand)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'
}
});
Eerst krijgen de ( vereisen-jQuery ) van de officiële github repo. Na dit uw directory eruit zal zien:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Momenteel is de makkelijkste manier om te werken met jQuery en AMD modules op Typescript is om het volgende op de main.ts schrijven:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
En noem het uit je 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>
Ik hoop dat dit helpt!
U verwijst externe modules door pad en de bestandsnaam (minus de extensie .js), of gewoon door de bestandsnaam als ze wereldwijd. In uw geval, moet u dit doen binnen van module.ts:
import jquery = module('./jquery-1.8.2');
Vergeet niet om compileren met --module AMDsinds standaard je code die de commonjs gebruikt te krijgen requirefunctie.