Benutzerdefinierte Web AppBuilder Widgets in TypeScript

GavinRehkemper

<\/HEAD>

Wenn Sie ein JavaScript-Entwickler sind, haben Sie vielleicht von TypeScript<\/A> gehört, einer typisierten Obermenge von JavaScript, die zu einfachem JavaScript kompiliert. Wenn Sie außerdem benutzerdefinierte Web AppBuilder Widgets erstellen, ist die Verwendung von TypeScript in einem Widget eine großartige Möglichkeit, mit TypeScript zu beginnen. Hier sind einige Hinweise und Tipps, die ich bei der Verwendung von TypeScript im Entwicklungsworkflow für benutzerdefinierte Web AppBuilder Widgets entdeckt habe.<\/P>

<\/P>

Hintergrund<\/H3><\/P>Mein üblicher Web AppBuilder-Entwicklungsworkflow besteht darin, meinen Widget-Code in einem eigenen Code-Repository zu haben und einen Task-Runner wie Grunt oder Gulp zu verwenden, um meinen Code automatisch zu kompilieren und an die richtigen Stellen zu kopieren (das stemapp-Verzeichnis und optional das Server-Verzeichnis der App, an der ich gerade arbeite). In diesem Kontext übernimmt TypeScript die Rolle des "Transpilers", wo Babel derzeit in Ihrem Stack sein könnte.<\/P><\/P>tsconfig.json-Datei<\/H3><\/P>Viele Aspekte Ihrer tsconfig.json-Datei sind projektabhängig, aber es gibt einige Dinge, die Sie benötigen:<\/P>"module": "amd" - wir wählen "amd", weil AMD<\/A> der Modulstil ist, den Web AppBuilder erwartet, wenn ein Widget in eine App geladen wird.<\/LI>"moduleResolution": "classic" - weil wir oben "AMD" gewählt haben<\/LI>"target": "es5" - der ECMAScript JavaScript-Typ, den der TypeScript-Compiler ausgeben soll. Wir wollen es auf es5 ausrichten, damit der Code, den wir im ES6-Stil schreiben, so konvertiert wird, dass ältere Browser ihn lesen können.<\/LI>"types": [ "arcgis-js-api", "dojo-typings"] - die Namen der Typdefinitionen, die wir einbeziehen möchten.<\/LI>"inlineSources" und "inlineSourceMap" - setzen Sie diese auf true, wenn Sie ein Build-System haben, das Code verschiebt, damit Ihre Source Maps beim Debuggen im Browser funktionieren.<\/LI><\/OL>

<\/P>

Vollständiges Beispiel

hier<\/A>. <\/P>

<\/P>

Declare Decorator<\/H3><\/P>Dies ist der Hauptschlüssel für den gesamten Prozess. Er sagt dem TypeScript-Compiler, wie er Ihre ES6-Klassensyntax in Ihrer Widget.ts-Datei in die Dojo-Style define\/declare-Syntax übersetzen soll, die Web AppBuilder erwartet. Dieser Codeabschnitt kann aus dem dojo\/typings Repository bezogen werden<\/A> und in Ihre Widget-Dateien aufgenommen werden. Dann importieren Sie ihn in Ihre Widget.ts-Datei<\/A> und wenden den Decorator auf Ihre Widget-Klasse an<\/A>. Beachten Sie, dass Decorators derzeit experimentell sind<\/A>, sodass sie möglicherweise in Zukunft aus TypeScript entfernt werden könnten. Für jetzt ist dies jedoch eine gute Option, die unseren Code sauber hält.<\/P>

<\/P>

Promises<\/H3><\/P>Ich möchte Code so nah wie möglich an echtem ES6-JavaScript schreiben. Daher möchte ich die native JavaScript Promise-Syntax verwenden. Aber als ich das in meinem Widget versuchte, erhielt ich zunächst einen Fehler: "error TS2693: 'Promise' bezieht sich nur auf einen Typ, wird hier aber als Wert verwendet." Um dieses Problem zu lösen, musste ich nur die Bibliothek "es6-promise" zur Eigenschaft "lib" in der Datei "tsconfig.json" hinzufügen. Weitere Informationen finden Sie in der Zeile "--lib" in der TypeScript Compiler Options Table<\/A> – einschließlich einer Erklärung, warum ich dom, es5 usw. einschließe sowie Optionen, die Sie zusätzlich zu es2015.promise hinzufügen können.<\/P>

<\/P>

["dom", "es5", "scripthost", <\/_EM><\/_STRONG>"es2015.promise"<\/_EM><\/_STRONG>]<\/_P><\/_P>

Sourcemaps<\/_H3><\/_P><\/_P>Ich habe festgestellt, dass es am einfachsten ist, wenn Sie "inlineSources" und "inlineSourceMap" in Ihrer "tsconfig.json"-Datei auf true setzen. Andernfalls ist der Pfad der Sourcemap oft falsch. Die TS-Quelle wird als separate Datei von Ihrer Hauptwidget-Datei angezeigt:<\/_SPAN><\/_P><\/_P> <\/_P><\/_P>Wie bitte?<\/_H3><\/_P><\/_P>Das sind viele Informationen und es ist manchmal schwierig, alle Einstellungen im Projekt genau richtig zu bekommen. Deshalb habe ich ein Beispielwidget in einem GitHub-Repository zusammengestellt, das hier zum Download verfügbar ist: Web AppBuilder Typescript Examples<\/_A>. Beachten Sie, dass dort 2 Beispiele enthalten sind, die 2 "Stile" von Projekten repräsentieren. Bitte lesen Sie die README-Datei zur Klärung, welches Sie verwenden sollten. Wir erwägen auch eine TypeScript-Option im Web AppBuilder Custom Widget Generator<\/_A>, und wenn Sie Feedback dazu haben, was Sie dort sehen möchten, lassen Sie es uns bitte über dieses GitHub-Issue<\/_A> wissen. Danke!<\/_P><\/_P>

Links<\/_H3><\/_P>Web AppBuilder Typescript Examples<\/_A>ArcGIS Ideas: Pflegen einer Typescript Definitionsdatei für jimu.js<\/_A>Esri Web AppBuilder Yeoman Generator: TypeScript-Unterstützung<\/_A><\/_P><\/_P>Dank an die Entwicklergemeinschaftsmitglieder David Wilton<\/_A>, Alex Jones<\/_A> und Mike Tschudi<\/_A> für ihre Hilfe beim Code und Repository.<\/_P>