Wie erstellen Sie eine .d.ts-Definitionsdatei für Typisierungen aus einer vorhandenen JavaScript-Bibliothek?

Ich verwende viele Bibliotheken, sowohl meine eigenen als auch die von Drittanbietern. Ich sehe, dass das Verzeichnis "typings" einige für Jquery und WinRT enthält ... aber wie werden sie erstellt?

Abhängig von der jeweiligen Bibliothek, der Schreibweise und der gewünschten Genauigkeit stehen Ihnen einige Optionen zur Verfügung. Lassen Sie uns die Optionen in ungefähr absteigender Reihenfolge der Erwünschtheit überprüfen.

Vielleicht existiert es bereits

Überprüfen Sie immer zuerst DefinitelyTyped ( https://github.com/DefinitelyTyped/DefinitelyTyped ). Dies ist ein Community-Repo mit buchstäblich Tausenden von .d.ts-Dateien, und es ist sehr wahrscheinlich, dass das, was Sie verwenden, bereits vorhanden ist. Sie sollten auch TypeSearch ( https://microsoft.github.io/TypeSearch/ ) überprüfen, eine Suchmaschine für NPM-veröffentlichte .d.ts-Dateien. Dies hat etwas mehr Definitionen als DefinitelyTyped. Einige Module liefern im Rahmen ihrer NPM-Verteilung auch ihre eigenen Definitionen aus. Überprüfen Sie daher, ob dies der Fall ist, bevor Sie versuchen, Ihre eigenen zu schreiben.

Vielleicht brauchst du keinen

TypeScript unterstützt jetzt das --allowJsFlag und führt weitere JS-basierte Schlussfolgerungen in .js-Dateien durch. Sie können versuchen, die .js-Datei zusammen mit der --allowJsEinstellung in Ihre Kompilierung aufzunehmen, um festzustellen , ob Sie dadurch ausreichend Typinformationen erhalten . TypeScript erkennt Dinge wie ES5-Klassen und JSDoc-Kommentare in diesen Dateien, kann jedoch ausgelöst werden, wenn sich die Bibliothek auf seltsame Weise selbst initialisiert.

Erste Schritte mit --allowJs

Wenn --allowJsgab dir anständige Ergebnisse und Sie wollen eine bessere Definition Datei schreiben selbst, Sie kombinieren --allowJsmit --declarationTyposkript der „best guess“ auf die Arten der Bibliothek zu sehen. Dies gibt Ihnen einen anständigen Ausgangspunkt und ist möglicherweise so gut wie eine von Hand erstellte Datei, wenn die JSDoc-Kommentare gut geschrieben sind und der Compiler sie finden konnte.

Erste Schritte mit dts-gen

Wenn --allowJsdies nicht funktioniert hat, können Sie dts-gen ( https://github.com/Microsoft/dts-gen ) verwenden, um einen Ausgangspunkt zu erhalten. Dieses Tool verwendet die Laufzeitform des Objekts, um alle verfügbaren Eigenschaften genau aufzulisten. Auf der positiven Seite ist dies in der Regel sehr genau, aber das Tool unterstützt das Scrapen der JSDoc-Kommentare zum Auffüllen zusätzlicher Typen noch nicht. Du machst das so:

npm install -g dts-gen
dts-gen -m <your-module>

Dies wird your-module.d.tsim aktuellen Ordner generiert .

Drücke die Schlummertaste

Wenn Sie alles nur später erledigen und eine Weile ohne Typen auskommen möchten, können Sie jetzt in TypeScript 2.0 schreiben

declare module "foo";

Damit können Sie importdas "foo"Modul mit Typ any. Wenn Sie eine globale haben, mit der Sie sich später befassen möchten, schreiben Sie einfach

declare const foo: any;

das gibt Ihnen eine fooVariable.

Sie können entweder tsc --declaration fileName.tswie Ryan beschreibt, oder Sie können festlegen , declaration: trueunter compilerOptionsin Ihrer tsconfig.jsonvorausgesetzt , Sie haben bereits eine haben tsconfig.jsonunter Ihrem Projekt.

Der beste Weg, um damit umzugehen (wenn eine Deklarationsdatei auf DefinitelyTyped nicht verfügbar ist ), besteht darin, Deklarationen nur für die von Ihnen verwendeten Dinge und nicht für die gesamte Bibliothek zu schreiben. Dies reduziert die Arbeit erheblich - und der Compiler hilft zusätzlich, indem er sich über fehlende Methoden beschwert.

Wie Ryan sagt, hat der tsc-Compiler einen Schalter, --declarationder eine .d.tsDatei aus einer .tsDatei generiert . Beachten Sie auch, dass TypeScript (mit Ausnahme von Fehlern) Javascript kompilieren kann, damit Sie vorhandenen Javascript-Code an den tsc-Compiler übergeben können.

Wie in http://channel9.msdn.com/posts/Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-TypeScript um 00:33:52 beschrieben, hatten sie ein Tool zum Konvertieren von WebIDL- und WinRT-Metadaten erstellt TypeScript d.ts.

Hier ist eine PowerShell, die eine einzelne TypeScript-Definitionsdatei erstellt, eine Bibliothek, die mehrere *.jsDateien mit modernem JavaScript enthält.

Ändern Sie zunächst alle Erweiterungen in .ts.

Get-ChildItem | foreach { Rename-Item $_ $_.Name.Replace(".js", ".ts") }

Verwenden Sie zweitens 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  }

Kombinieren Sie schließlich alle *.d.tsDateien zu einer index.d.ts, entfernen Sie die importAnweisungen und entfernen Sie die defaultaus 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 einer einzelnen verwendbaren index.d.tsDatei, die viele der Definitionen enthält.

Wenn Sie Ihre eigene Bibliothek erstellen, können Sie *.d.tsDateien mit dem tscBefehl (TypeScript Compiler) wie folgt erstellen : (vorausgesetzt , Sie erstellen Ihre Bibliothek im dist/libOrdner)

tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly

• -d( --declaration): generiert die *.d.tsDateien
• --declarationDir dist/lib: Ausgabeverzeichnis für generierte Deklarationsdateien.
• --declarationMap: Erzeugt eine Quellenkarte für jede entsprechende '.d.ts'-Datei.
• --emitDeclarationOnly: Nur '.d.ts'-Deklarationsdateien ausgeben. (kein kompiliertes JS)

( Alle Befehlszeilen-Compileroptionen finden Sie in den Dokumenten. )

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)

Ich würde nach einer vorhandenen Zuordnung Ihrer JS-Bibliotheken von Drittanbietern suchen, die Script # oder SharpKit unterstützen. Benutzer dieser Cross-Compiler von C # zu .js haben das Problem, mit dem Sie jetzt konfrontiert sind, und haben möglicherweise ein Open-Source-Programm veröffentlicht, mit dem Sie Ihre Drittanbieter-Bibliothek scannen und in Skelett-C # -Klassen konvertieren können. Wenn ja, hacken Sie das Scannerprogramm, um TypeScript anstelle von C # zu generieren.

Andernfalls ist das Übersetzen einer öffentlichen C # -Schnittstelle für Ihre Drittanbieter-Bibliothek in TypeScript-Definitionen möglicherweise einfacher als das Lesen des Quell-JavaScript.

Mein besonderes Interesse gilt Senchas ExtJS RIA-Framework, und ich weiß, dass Projekte veröffentlicht wurden, um eine C # -Interpretation für Script # oder SharpKit zu generieren