Aangepaste Web AppBuilder-widgets in TypeScript

GavinRehkemper

<\/HEAD>

Als je een JavaScript-ontwikkelaar bent, heb je misschien gehoord van TypeScript<\/A>, een getypeerde superset van JavaScript die compileert naar gewone JavaScript. Als je ook aangepaste Web AppBuilder-widgets maakt, is het gebruik van TypeScript in een widget een geweldige manier om met TypeScript te beginnen. Hier zijn een paar opmerkingen en tips die ik heb ontdekt tijdens het gebruik van TypeScript binnen een Web AppBuilder aangepaste widget-ontwikkelworkflow.<\/P>

<\/P>

Achtergrond<\/H3><\/P>Mijn gebruikelijke Web AppBuilder-ontwikkelworkflow is om mijn widgetcode in een eigen code repository te hebben en een taakrunner zoals Grunt of Gulp te gebruiken om mijn code automatisch te compileren en naar de juiste plaatsen te kopiëren (de stemapp-directory en optioneel de serverdirectory van de app waaraan ik momenteel werk). Binnen deze context vervult TypeScript de rol van "transpiler" waar Babel mogelijk momenteel in jouw stack zit.<\/P><\/P>tsconfig.json-bestand<\/H3><\/P>Veel aspecten van je tsconfig.json-bestand zijn per project verschillend, maar er zijn een paar dingen die je wel nodig hebt:<\/P>"module": "amd" - we kiezen "amd" omdat AMD<\/A> de modulestijl is die Web AppBuilder verwacht te zien bij het laden van een widget in een app.<\/LI>"moduleResolution": "classic" - omdat we hierboven "AMD" hebben gekozen<\/LI>"target": "es5" - het ECMAScript JavaScript-type dat we willen dat de TypeScript-compiler uitvoert. We willen target es5 zodat de code die we schrijven in ES6-stijl JavaScript wordt omgezet zodat oudere browsers deze kunnen lezen.<\/LI>"types": [ "arcgis-js-api", "dojo-typings"] - de namen van de type-definities die we willen opnemen.<\/LI>"inlineSources" en "inlineSourceMap" - zet deze op true als je een buildsysteem hebt dat code verplaatst, zodat je sourcemaps werken bij het debuggen in de browser.<\/LI><\/OL>

<\/P>

Volledig voorbeeld

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

<\/P>

Declare Decorator<\/H3><\/P>Dit is de belangrijkste sleutel tot het hele proces. Het vertelt de TypeScript-compiler hoe je ES6-stijl klassensyntaxis in je Widget.ts-bestand moet vertalen naar de Dojo-stijl define\/declare-syntaxis die Web AppBuilder verwacht. Dit stukje code kan worden verkregen uit de dojo\/typings repository<\/A>, en opgenomen in je widgetbestanden. Je importeert het dan in je Widget.ts-bestand<\/A>, en past de decorator toe op je Widget-klasse<\/A>. Let op dat decorators experimenteel zijn<\/A> op dit moment, dus ze kunnen mogelijk in de toekomst uit TypeScript worden verwijderd, maar voor nu is dit een goede optie die onze code schoon houdt.<\/P>

<\/P>

Promises<\/H3><\/P>Ik wil code schrijven die zo dicht mogelijk bij echte ES6 JavaScript ligt. Dus ik wil graag de native JavaScript Promise-syntaxis gebruiken. Maar toen ik dit probeerde in mijn widget, kreeg ik aanvankelijk een foutmelding: "error TS2693: 'Promise' verwijst alleen naar een type, maar wordt hier als waarde gebruikt." Om dit probleem op te lossen hoefde ik alleen maar de "es6-promise" bibliotheek toe te voegen aan mijn "lib" eigenschap in het "tsconfig.json" bestand. Zie de "--lib" regel in de TypeScript Compiler Options Table<\/A> voor meer informatie - inclusief een toelichting waarom ik dom, es5, enzovoort toevoeg, evenals opties die je kunt toevoegen naast es2015.promise.<\/P>

<\/P>

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

Sourcemaps<\/_H3><\/_P><\/_P>Ik vond het het gemakkelijkst als je "inlineSources" en "inlineSourceMap" in je "tsconfig.json" bestand op true zet. Anders is het pad van de sourcemap vaak verkeerd. De TS-bron wordt weergegeven als een apart bestand van je hoofdwidgetbestand:<\/_SPAN><\/_P><\/_P> <\/_P style="text-align: center;"><\/_P><\/_P>Huh?<\/_H3><\/_P><\/_P>Dat is veel informatie, en het is soms moeilijk om alle instellingen in je project precies goed te krijgen, dus heb ik een voorbeeldwidget in een GitHub-repository samengesteld die hier beschikbaar is voor download: Web AppBuilder Typescript Examples<\/_A>. Let op dat er 2 voorbeelden in staan die 2 "stijlen" van projecten vertegenwoordigen, dus lees alsjeblieft het README-bestand voor verduidelijking over welke te gebruiken. We overwegen ook om een TypeScript-optie toe te voegen aan de Web AppBuilder Custom Widget Generator<\/_A>, en als je feedback hebt over wat je daar graag zou willen zien, laat het ons dan weten via dit GitHub issue<\/_A>. Bedankt!<\/_P><\/_P>

Links<\/_H3><\/_P>Web AppBuilder Typescript Examples<\/_A>ArcGIS Ideas: Onderhoud een Typescript-definitiebestand voor jimu.js<\/_A>Esri Web AppBuilder Yeoman Generator: TypeScript Ondersteuning<\/_A><\/_P><\/_P>Bedankt aan ontwikkelaarscommunityleden David Wilton<\/_A>, Alex Jones<\/_A>, en Mike Tschudi<\/_A> voor hulp bij de code en repository.<\/_P><\/_BODY><\/_HTML>