Verwenden Sie import/require in TypeScript, um Schnittstellendeklarationen zu erhalten

Wenn ich eine TypeScript-Deklarationsdatei (ex. Jquery.d.ts) unter Verwendung der /// <reference path="..."/>-Syntax referenziere, muss ich sicherstellen, dass ich die entsprechende Bibliothek auf andere Weise lade , dh, nur auf die .d.ts-Datei zu verweisen, lädt die Bibliothek nicht.Verwenden Sie import/require in TypeScript, um Schnittstellendeklarationen zu erhalten

Gibt es eine Möglichkeit, TypeScript einen require() Aufruf für die Bibliothek generieren, wenn ich es verwende? Wenn ich nicht AMD/requires nutze, könnte ich einfach require manuell anrufen, aber ich würde gerne mit AMD arbeiten.

Der Vorteil davon ist, dass meine Abhängigkeiten nicht an zwei Stellen definiert werden würden. Eine Referenzierung der Bibliothek aus einer .ts-Datei würde ausreichen, um sicherzustellen, dass sie geladen wird, anstatt die Liste der Abhängigkeiten manuell in meinem HTML-Code zu verwalten.

Update: Ich öffnete eine new question, die meine genaue Situation verdeutlicht. Ich möchte die Antwort auf meine ursprüngliche Frage anerkennen, da ich nicht alle notwendigen Details angegeben habe.

Quelle

2012-10-19 dcstraw

Ja, TypeScript unterstützt "externe" Module, die im Grunde erstklassige AMD- oder CommonJS-Module sind. Zum Beispiel:

MyLib.ts

export function foo() { return 'bar' }

MyProj.ts

import lib = module('./MyLib.ts') 
lib.foo(); // returns bar

Kompilieren dies mit "--module amd" und Sie werden das richtige Modul erhalten und Syntax für Sie generiert benötigen .

Quelle

2012-10-19 23:35:33

Module funktionieren hervorragend für Bibliotheken, die Funktionen und Variablen direkt bereitstellen, aber ich brauche etwas ähnliches für Bibliotheken, die vorhandene Funktionalität wie jQuery-Plugins erweitern. Es gibt nichts in diese zu exportieren, aber das Laden von ihnen fügt zusätzliche Aufrufe auf der JQuery-Schnittstelle (definiert in jquery.d.ts) – dcstraw

In aller Fairness denke ich, Ihre Antwort gilt für meine ursprüngliche Frage. Ich konnte meine Frage nicht vollständig angeben. Ich werde dies als die Antwort markieren und eine klarere Frage stellen. – dcstraw

Ich schrieb something darüber auf meinem Blog. Sie können auch ein Beispiel auf GitHub finden.

Die Lösung ist ziemlich lange zu erklären, aber im Grunde benutze ich Shims mit Require.JS, um einen Modulnamen zu definieren, der die Javascript-Bibliothek darstellt, die ich laden möchte. Ich erstelle dann eine TypeScript-Datei mit dem gleichen Namen, damit der TypeScript-Compiler Javascript-Code generiert, der die gewünschte JS-Bibliothek verwenden kann. Macht eigentlich keinen Sinn, aber lies bitte den Post und ich denke, es wird mehr Sinn ergeben.

Quelle

2012-10-20 23:17:14 Absolom

Danke für die Antwort. Ich glaube jedoch nicht, dass dies mein Problem löst. Bei dieser Lösung wird weiterhin davon ausgegangen, dass die Bibliothek mindestens einen Aufruf der obersten Ebene enthält, damit TypeScript die Abhängigkeit im Aufruf 'define' generiert. Ich habe keine Top-Level-Methoden oder Variablen, da diese Bibliotheken Plugins sind, die bestehende Funktionalität erweitern. Auch ich glaube nicht, dass Sie wirklich Shims in Ihrem Beispiel verwenden müssen. Wenn Sie einfach eine Unterstreichung.d.ts neben der Unterstreichung.js erstellen, können Sie das Modul 'libs/Unterstrich' importieren und TypeScript wird die .d.ts-Datei verwenden. – dcstraw

Die d.ts-Datei wird nur von Typescript verwendet, um festzustellen, ob Ihr Code korrekt eingegeben wurde. Im Grunde ist es nur eine Schnittstelle, daher wird vom Typescript-Compiler kein Code erzeugt. Sie müssen die Implementierung der Javascript-Bibliothek in irgendeiner Weise bereitstellen. Eine Lösung besteht darin, eine Javascript-Datei im HTML-Code zu referenzieren, wie Sie es nicht möchten. Eine andere Lösung besteht darin, AMD zu verwenden, um es asynchron zu laden. Das ist die Lösung, die ich vorschlage. – Absolom

Verstanden, aber ich denke immer noch, dass Ihre Lösung wegen der Shims unnötig komplex ist. – dcstraw

Verwenden Sie import/require in TypeScript, um Schnittstellendeklarationen zu erhalten

Antwort

Verwandte Themen