Wie kann ich die Jquery AMD-Modul für meine Typoskript Modul benötigen. Zum Beispiel sagen wir, Verzeichnisstruktur für Skripte wie folgt aussieht:
jquery-1.8.2.js
jquery.d.ts
module.ts
require.js
Ich möchte die Datei von module.ts js erzeugt erfordern jquery-1.8.2.js über require.js geladen werden.
Zur Zeit habe ich:
import jquery = Modul ( 'jquery')
Daraus ergibt sich der Name „jquery“ existiert nicht im aktuellen Bereich.
Es sieht aus wie Standard wieder verändert, wobei die unter 0.9+ Methode noch funktioniert, aber mit ES6 kommt der folgende Modul Laden verwendet werden könnte. (Referenz: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
und sogar teilweise diejenigen,
import {extend} from "jquery";
(dies immer noch die jquery.d.ts benötigen, wenn tsd installiert ist - tsd install jquery)
installieren tsd: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
Und auch, wenn Ihr jquery.d.ts kein externes Modul definieren, fügen Sie folgendes zu jquery.d.ts:
declare module "jquery" {
export = $;
}
Ich denke , eine Menge Verwirrung um dies ist darauf zurückzuführen , jQuery nicht wirklich benimmt sich wie ein externes Modul, das die Verwendung einer hemmt importAussage. Die Lösung ist recht sauber, einfach und elegant genug , um nicht das Gefühl , wie ein Work-around.
Ich habe ein einfaches Beispiel geschrieben Mit RequireJS und jQuery in Typoskript , die wie folgt funktioniert ...
Sie greifen die Typdefinitionen von Definitiv typisierten für RequireJS und jQuery.
Sie können nun roh RequireJS mit statischer Typisierung innerhalb der Typoskript-Datei verwenden.
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.');
});
});
Und dann brauchen Sie nur den einzelnen Script-Tag zu Ihrer Seite hinzufügen:
<script data-main="app" src="require.js"></script>
Vorteile gegenüber anderen Lösungen?
.d.tsDatei für)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'
}
});
Zuerst sollten Sie die ( require-jquery ) aus dem offiziellen GitHub Repo. Danach wird Ihr Verzeichnis aussehen wird:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Derzeit ist die einfachste Art und Weise mit JQuery und AMD-Module auf Typoskript zu arbeiten, ist die folgende auf den main.ts zu schreiben:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
Und es von Ihrem test.html nennen:
<!DOCTYPE html>
<html>
<head>
<script data-main="main" src="require-jquery.js"></script>
</head>
<body>
<h1>TypeScript JQuery AMD test</h1>
</body>
</html>
Hoffe das hilft!
Sie verweisen auf externe Module von Pfad und Dateinamen (minus der Erweiterung .js), oder einfach nur nach Dateinamen, wenn sie global. In Ihrem Fall sollten Sie dies innerhalb von module.ts tun:
import jquery = module('./jquery-1.8.2');
Denken Sie daran , mit zu kompilieren , --module AMDda standardmäßig Sie Code, der die Commonjs verwendet requireFunktion.