Asynchroniczne ładowanie deklaracji TypeScript bez eksportu

Question

Mam wiele wtyczek jQuery, które chciałbym wczytać przy użyciu wzorca AMD w TypeScript. Na przykład, mogę mieć tę strukturę:

/lib/jquery.myplugin.js 
/app.ts 

Wtyczka rozszerza jQuery. Nie zapewnia nowych funkcji lub zmiennych najwyższego poziomu. Przykładem może być:

// jquery.myplugin.js 
jQuery.fn.myExample = function() { ... } 

odpowiedni plik jquery.myplugin.d.ts wygląda następująco:

interface JQuery { 
    myExample(); 
} 

tak, że teraz w app.ts mogę nazwać coś takiego $('#my-element').myExample(). Zauważ, że to zakłada, że ​​mam już załadowane deklaracje jquery.d.ts z Microsoft.

Moje pytanie brzmi: jak ładować tę bibliotekę asynchronicznie i korzystać ze statycznego pisania typu? można go używać tak:

/// <reference path="lib/jquery.myplugin.d.ts"/> 

ale to wymaga ode mnie dodać do mojego <script> tag HTML, a biblioteka nie jest ładowany asynchronicznie. Chcę maszynopis do wygenerowania tego kodu:

define(["require", "exports", "lib/jquery.myplugin"], function (require, exports, __jquery.myplugin__) { 
    ... 
    // Use my plugin 
    $('#my-element').myExample(); 
} 

Jednak ponieważ nie ma eksportu w .d.ts plik nie mogę napisać import myplugin = module('lib/jquery.myplugin').

Najbliższym, co udało mi się zrobić, jest utworzenie jquery.myplugin.d.ts, który odwołuje się do innego pliku ts z deklaracją interfejsu i zawiera co najmniej jeden eksport. Jednak w tej bibliotece nie ma niczego do wyeksportowania, a żeby uzyskać pożądany wynik, muszę nie tylko dodać eksport, ale muszę go nazwać.

Aktualizacja: Mam otworzył work item za to na typescript.codeplex.com

Answer 1

Maszynka do pisania nie będzie importować modułów, chyba że wyeksportuje coś i jeśli nie użyjesz bezpośrednio tego, co wyeksportował, ale te rzeczy nie są prawdziwe dla rzeczy takich jak wtyczki JQuery, które po prostu dodają nowe metody do $. Rozwiązaniem jest użycie flagi zależności amd zgodnie z dokumentacją here.

Dodaj linię jak to u góry pliku:

///<amd-dependency path="jgrowl" /> 

To zmusi go do listy maszynopis w define inwokacji w skompilowanej JavaScript. Trzeba także ustawić ścieżkę i podkładkę dla swojej wtyczki w require.config, tak:

require.config({ 
    paths: { 
    jquery: "external/jquery-2.1.1", 
    jgrowl: "external/jquery.jgrowl-1.4.0.min", 
    }, 
    shim: { 
    'jgrowl': { deps: ['jquery'] }, 
    } 
}); 

Answer 2

rodzaj hack, ale tutaj jest jedynym sposobem Obecnie wiadomo.

myplugin.d.ts: rozszerza JQueryStatic interfejs obejmują intellisense dla funkcjonalności myplugin za

/// <reference path="../dep/jquery/jquery.d.ts" /> 

interface JQueryStatic { 
    myFunc(): string; 
} 

myplugin.ts: plik manekina, którego jedynym celem jest, aby mieć maszynopis wygenerowania amd definicję modułu .

var test: number = 1; 

consumer.ts:

/// <reference path="myplugin.d.ts" /> 

import myplugin = module('myplugin'); 

// without this typescript knows you aren't actually using the module 
// and won't create the define block including your plugin 
var workaround = myplugin.test; 

$.myFunc(); 

consumer.js: generowane z tsc -c --module amd consumer.ts

define(["require", "exports", 'myplugin'], function(require, exports, __myplugin__) { 
    /// <reference path="myplugin.d.ts" /> 
    var myplugin = __myplugin__; 

    // without this typescript knows you aren't actually using the module 
    // and won't create the define block including your plugin 
    var workaround = myplugin.test; 
    $.myFunc(); 
}) 

Zauważ, że myplugin.d.ts będzie ciągnąć w intellisense dla zarówno jQuery, jak i definicje wtyczek. Konieczne było utworzenie zarówno myplugin.d.ts, jak i myplugin.ts, ponieważ nie wiem jak (jeśli to możliwe) wyeksportować coś przy jednoczesnym rozszerzeniu istniejącego interfejsu w tym samym pliku bez błędów.

Answer 3

Na dole pliku, że interfejs został zdefiniowany w was może umieścić:

export var JQuery: JQueryStatic; 

co uczyni intellisense dla jQuery pokazać się na dowolny plik załadowany, używając import module.

Jeśli plik jest ładowany asynchronicznie i jesteś ustawienie JQuery do innej zmiennej (tj myJQuery) można zadeklarować, że plik został już załadowany przez pewnym momencie, na przykład, jeśli masz plik w ///<reference path=...> powinieneś być w stanie używać:

declare var myJQuery: JQuery; 

aby dokonać myJQuery typu JQuery.

Kolejny Hack jest dodanie interfejsu bezpośrednio do obszaru, gdzie kod jest ładowany asynchronicznie:

interface JQueryStatic { 
    myFunc(): string; 
} 

Jeśli nie przeszkadza edycji JQuery.d.ts plików, możesz dodać swoją funkcję do zdefiniowanych tam interfejsów.

powiązane z powrotem do przykładu, powinieneś być w stanie zrobić coś takiego:

declare var __jquery : JQueryStatic; 

Na górze zdefiniowania zwrotnego; i pod warunkiem, że interfejs został rozszerzony o JQueryStatic i uwzględnił go przy użyciu ///<reference path=...> znacznik powinien działać zgodnie z oczekiwaniami.