Πώς μπορώ να απαιτούν την ενότητα AMD jQuery για τη μονάδα γραφομηχανή μου. Για παράδειγμα, ας υποθέσουμε ότι η δομή του καταλόγου για σενάρια μοιάζει με αυτό:
jQuery-1.8.2.js
jquery.d.ts
module.ts
require.js
Θέλω το αρχείο που δημιουργείται JS από module.ts να απαιτούν jQuery-1.8.2.js να φορτωθούν μέσω require.js.
Αυτή τη στιγμή έχω:
εισαγωγής jQuery = δομοστοιχείο ( 'jQuery')
Αυτό έχει ως αποτέλεσμα το όνομα «jQuery» δεν υπάρχει στο τρέχον πεδίο.
Μοιάζει με πρότυπο αλλάζει και πάλι, όπου η κάτω 0.9+ μέθοδος εξακολουθεί να λειτουργεί, αλλά με ES6 που έρχονται θα μπορούσε να χρησιμοποιηθεί η παρακάτω μονάδα φόρτωσης. (παραπομπή: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
και ακόμη και η μερική αυτά
import {extend} from "jquery";
(αυτό εξακολουθεί να απαιτεί από τους jquery.d.ts, εάν είναι εγκατεστημένο TSD - tsd install jquery)
για την εγκατάσταση TSD: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
Και επίσης, αν jquery.d.ts σας δεν καθορίζουν μια εξωτερική μονάδα, προσθέστε τα ακόλουθα στο jquery.d.ts:
declare module "jquery" {
export = $;
}
Νομίζω ότι πολλά από τη σύγχυση γύρω από αυτό οφείλεται στην jQuery δεν είναι πραγματικά ενεργεί σαν μια εξωτερική μονάδα, η οποία αναστέλλει τη χρήση μιας importδήλωσης. Η λύση είναι πολύ καθαρό, απλό και αρκετά για να μην αισθάνεται σαν ένα έργο-γύρω κομψό.
Έχω γράψει ένα απλό παράδειγμα χρησιμοποιώντας RequireJS και jQuery στη γραφομηχανή , η οποία λειτουργεί ως εξής ...
Μπορείτε να αρπάξει τους ορισμούς τύπου από Σίγουρα πληκτρολογούνται για RequireJS και jQuery.
Τώρα μπορείτε να χρησιμοποιήσετε πρώτες RequireJS με στατική πληκτρολόγηση στο εσωτερικό του αρχείου γραφομηχανή.
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.');
});
});
Και τότε το μόνο που χρειάζεται να προσθέσετε την ενιαία ετικέτα σεναρίου στη σελίδα σας:
<script data-main="app" src="require.js"></script>
Τα οφέλη σε σχέση με άλλες λύσεις;
.d.tsαρχείο για)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'
}
});
Πρώτα να πάρει το ( απαιτεί-jQuery ) από την επίσημη repo GitHub. Μετά από αυτό τον κατάλογο σας θα μοιάσει με:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Επί του παρόντος, ο ευκολότερος τρόπος για να συνεργαστεί με JQuery και AMD μονάδες σε γραφομηχανή είναι να γράψει τα εξής για τις main.ts:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
Και κλήση από 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>
Η ελπίδα αυτό βοηθά!
Μπορείτε αναφορά εξωτερικές μονάδες από τη διαδρομή και το όνομα αρχείου (μείον την επέκταση .js), ή απλά με το όνομα αρχείου και αν είναι παγκόσμια. Στην περίπτωσή σας, θα πρέπει να το κάνετε αυτό στο εσωτερικό της module.ts:
import jquery = module('./jquery-1.8.2');
Θυμηθείτε να συντάξει με --module AMDδεδομένου ότι από προεπιλογή θα πάρετε κώδικα που χρησιμοποιεί το commonjs requireλειτουργία.