Wie erstellt man eine .d.ts-„Typisierungs“-Definitionsdatei aus einer vorhandenen JavaScript-Bibliothek?
-
12-12-2019 - |
Frage
Ich verwende viele Bibliotheken sowohl von mir selbst als auch von Drittanbietern.Ich sehe, dass das Verzeichnis „typings“ einige für Jquery und WinRT enthält ...aber wie entstehen sie?
Lösung
Je nachdem, um welche Bibliothek es sich handelt, wie sie geschrieben ist und welches Maß an Genauigkeit Sie suchen, stehen Ihnen einige Optionen zur Verfügung.Sehen wir uns die Optionen in ungefähr absteigender Reihenfolge ihrer Wünschbarkeit an.
Vielleicht existiert es bereits
Überprüfen Sie immer DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped) Erste.Dies ist ein Community-Repo voller buchstäblich Tausender .d.ts-Dateien und es ist sehr wahrscheinlich, dass das, was Sie verwenden, bereits dort ist.Sie sollten auch TypeSearch überprüfen (https://microsoft.github.io/TypeSearch/), eine Suchmaschine für von NPM veröffentlichte .d.ts-Dateien;Dies wird etwas mehr Definitionen haben als DefinitelyTyped.Einige Module liefern auch ihre eigenen Definitionen als Teil ihrer NPM-Distribution aus. Überprüfen Sie daher auch, ob dies der Fall ist, bevor Sie versuchen, Ihre eigenen zu schreiben.
Vielleicht brauchen Sie keinen
TypeScript unterstützt jetzt das --allowJs
Flag und wird mehr JS-basierte Rückschlüsse in .js-Dateien ziehen.Sie können versuchen, die .js-Datei zusammen mit der Datei in Ihre Zusammenstellung aufzunehmen --allowJs
Einstellung, um zu sehen, ob Sie dadurch ausreichend gute Typinformationen erhalten.TypeScript erkennt Dinge wie Klassen im ES5-Stil und JSDoc-Kommentare in diesen Dateien, kann jedoch Probleme verursachen, wenn sich die Bibliothek auf seltsame Weise initialisiert.
Beginnen Sie mit --allowJs
Wenn --allowJs
Sie haben gute Ergebnisse erzielt und Sie möchten selbst eine Datei mit besserer Definition schreiben, die Sie kombinieren können --allowJs
mit --declaration
um TypeScripts „beste Schätzung“ zu den Typen der Bibliothek anzuzeigen.Dies gibt Ihnen einen guten Ausgangspunkt und kann genauso gut sein wie eine handverfasste Datei, wenn die JSDoc-Kommentare gut geschrieben sind und der Compiler sie finden konnte.
Erste Schritte mit dts-gen
Wenn --allowJs
hat nicht funktioniert, vielleicht möchten Sie dts-gen (https://github.com/Microsoft/dts-gen), um einen Ausgangspunkt zu erhalten.Dieses Tool verwendet die Laufzeitform des Objekts, um alle verfügbaren Eigenschaften genau aufzuzählen.Positiv zu vermerken ist, dass dies tendenziell sehr genau ist, aber das Tool unterstützt noch nicht das Scraping der JSDoc-Kommentare, um zusätzliche Typen zu füllen.Sie führen dies folgendermaßen aus:
npm install -g dts-gen
dts-gen -m <your-module>
Dies wird generiert your-module.d.ts
im aktuellen Ordner.
Drücke die Schlummertaste
Wenn Sie einfach alles später erledigen und eine Weile auf Typen verzichten möchten, können Sie in TypeScript 2.0 jetzt schreiben
declare module "foo";
das wird dich lassen import
Die "foo"
Modul mit Typ any
.Wenn Sie ein globales Problem haben, mit dem Sie sich später befassen möchten, schreiben Sie einfach
declare const foo: any;
was Ihnen eine geben wird foo
Variable.
Andere Tipps
Sie können entweder verwenden tsc --declaration fileName.ts
wie Ryan es beschreibt, oder Sie können es angeben declaration: true
unter compilerOptions
in deinem tsconfig.json
Vorausgesetzt, Sie hatten bereits eine tsconfig.json
unter Ihrem Projekt.
Der beste Weg, um damit umzugehen (wenn keine Deklarationsdatei verfügbar ist, ist auf unbedingt )Schreiben Sie Erklärungen nur für die Dinge, die Sie anstelle der gesamten Bibliothek verwenden.Dies reduziert die Arbeit viel - und zusätzlich kann der Compiler dabei helfen, sich über fehlende Methoden zu beschweren.
Wie Ryan sagt, hat der TSC-Compiler einen Schalter --declaration
was ein erzeugt .d.ts
Datei von a .ts
Datei.Beachten Sie außerdem, dass TypeScript (abgesehen von Fehlern) in der Lage sein soll, Javascript zu kompilieren, sodass Sie vorhandenen Javascript-Code an den TSC-Compiler übergeben können.
Wie in
Hier ist eine PowerShell, die eine einzelne TypeScript-Definitionsdatei und eine Bibliothek erstellt, die mehrere enthält *.js
Dateien mit modernem JavaScript.
Ändern Sie zunächst alle Erweiterungen in .ts
.
Get-ChildItem | foreach { Rename-Item $_ $_.Name.Replace(".js", ".ts") }
Zweitens verwenden Sie den TypeScript-Compiler, um Definitionsdateien zu generieren.Es wird eine Reihe von Compilerfehlern geben, die wir jedoch ignorieren können.
Get-ChildItem | foreach { tsc $_.Name }
Zum Schluss alles vermischen *.d.ts
Dateien in einem index.d.ts
, entferne den import
Anweisungen und das Entfernen der default
aus jeder Exportanweisung.
Remove-Item index.d.ts;
Get-ChildItem -Path *.d.ts -Exclude "Index.d.ts" | `
foreach { Get-Content $_ } | `
where { !$_.ToString().StartsWith("import") } | `
foreach { $_.Replace("export default", "export") } | `
foreach { Add-Content index.d.ts $_ }
Dies endet mit einem einzigen, nutzbaren index.d.ts
Datei, die viele der Definitionen enthält.
Ich würde nach einer vorhandenen Mapping Ihrer 3. Partei-JS-Bibliotheken suchen, die Skript # oder Sharpkit unterstützen.Benutzer dieser C # zu .js Cross-Compiler haben das Problem, das Sie jetzt vorstellen konfrontiert haben, und haben möglicherweise ein Open-Source-Programm veröffentlicht, um Ihre 3. Partei LIB zu scannen und in Skeleton C # -Kläfchen umzuwandeln.Wenn ja, hacken Sie das Scanner-Programm, um Typecript anstelle von C # zu generieren.
Fehler nicht, wodurch eine C # -Poire-Schnittstelle für Ihren Drittanbieter-LIB in Mastercript-Definitionen übersetzt wird
Mein besonderes Interesse ist Sencha's Extjs Ria Framework, und ich weiß, dass es Projekte veröffentlicht haben, um eine c #-Interpretation für Skript # oder Sharpkit zu generieren.
Wenn Sie Ihre eigene Bibliothek erstellen, können Sie diese erstellen *.d.ts
Dateien mithilfe der tsc
(TypeScript-Compiler)-Befehl wie folgt:(vorausgesetzt, Sie bauen Ihre Bibliothek entsprechend auf dist/lib
Ordner)
tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly
-d
(--declaration
):erzeugt die*.d.ts
Dateien--declarationDir dist/lib
:Ausgabeverzeichnis für generierte Deklarationsdateien.--declarationMap
:Erzeugt eine Quellzuordnung für jede entsprechende „.d.ts“-Datei.--emitDeclarationOnly
:Geben Sie nur „.d.ts“-Deklarationsdateien aus.(kein kompiliertes JS)
(siehe die Dokumente für alle Befehlszeilen-Compiler-Optionen)
Oder zum Beispiel in Ihrem package.json
:
"scripts": {
"build:types": "tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly",
}
und dann ausführen: yarn build:types
(oder npm run build:types
)