Vlastní widgety Web AppBuilder v TypeScriptu

GavinRehkemper

<\/HEAD>

Pokud jste vývojář JavaScriptu, možná jste slyšeli o TypeScriptu<\/A>, typově bezpečné nadmnožině JavaScriptu, která se překládá do čistého JavaScriptu. Pokud také vytváříte vlastní widgety pro Web AppBuilder, použití TypeScriptu ve widgetu je skvělý způsob, jak začít s TypeScriptem. Zde je několik poznámek a tipů, které jsem objevil při používání TypeScriptu v rámci vývoje vlastních widgetů pro Web AppBuilder.<\/P>

<\/P>

Pozadí<\/H3><\/P>Můj obvyklý vývojový postup pro Web AppBuilder je mít kód widgetu ve vlastním repozitáři a používat nástroj pro spouštění úloh jako Grunt nebo Gulp k automatické kompilaci a kopírování kódu na správná místa (adresář stemapp a volitelně adresář server aplikace, na které právě pracuji). V tomto kontextu TypeScript plní roli "transpileru", kde by mohl být ve vašem stacku Babel.<\/P><\/P>Soubor tsconfig.json<\/H3><\/P>Mnoho aspektů vašeho souboru tsconfig.json závisí na konkrétním projektu, ale existuje několik věcí, které potřebujete:<\/P>"module": "amd" - zvolili jsme "amd", protože AMD<\/A> je modulární styl, který Web AppBuilder očekává při načítání widgetu do aplikace.<\/LI>"moduleResolution": "classic" - protože jsme výše zvolili "AMD"<\/LI>"target": "es5" - typ ECMAScript JavaScriptu, který chceme, aby TypeScript kompilátor vyprodukoval. Cílíme na es5, aby kód napsaný v ES6 stylu JavaScriptu byl převeden tak, aby ho starší prohlížeče mohly číst.<\/LI>"types": [ "arcgis-js-api", "dojo-typings"] - názvy definic typů, které chceme zahrnout.<\/LI>"inlineSources" a "inlineSourceMap" - nastavte tyto na true, pokud máte build systém, který přesouvá kód, aby vaše zdrojové mapy fungovaly při ladění v prohlížeči.<\/LI><\/OL>

<\/P>

Úplný příklad

zde<\/A>. <\/P>

<\/P>

Dekorátor Declare<\/H3><\/P>Toto je hlavní klíč celého procesu. Říká TypeScript kompilátoru, jak přeložit vaši ES6-stylovou syntaxi třídy ve vašem souboru Widget.ts do Dojo-stylové syntaxe define\/declare, kterou Web AppBuilder očekává. Tento kus kódu lze získat z repozitáře dojo\/typings<\/A> a zahrnout do vašich souborů widgetů. Poté jej importujete do souboru Widget.ts<\/A> a aplikujete dekorátor na vaši třídu Widget<\/A>. Všimněte si, že dekorátory jsou momentálně experimentální<\/A>, takže by mohly být v budoucnu z TypeScriptu odstraněny, ale zatím je to dobrá možnost, která udržuje náš kód čistý.<\/P>

<\/P>

Promises<\/H3><\/P>Chtěl bych psát kód co nejblíže pravému ES6 JavaScriptu. Proto bych rád použil nativní syntaxi JavaScript Promise. Ale když jsem to zkoušel ve svém widgetu, nejprve jsem dostal chybu „error TS2693: 'Promise' odkazuje pouze na typ, ale zde je používán jako hodnota." K vyřešení tohoto problému stačilo přidat knihovnu "es6-promise" do vlastnosti "lib" v souboru "tsconfig.json". Viz řádek "--lib" v Tabulce možností kompilátoru TypeScript<\/A> pro více informací – včetně vysvětlení proč zahrnuji dom, es5 atd., stejně jako možnosti, které můžete přidat kromě es2015.promise.<\/P>

<\/P>

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

Zdrojové mapy (Sourcemaps)<\/_H3><\/_P><\/_P>Zjistil jsem, že je nejsnazší nastavit "inlineSources" a "inlineSourceMap" ve vašem souboru "tsconfig.json" na true. Jinak je často cesta ke zdrojové mapě nesprávná. Zdrojový TS se zobrazuje jako samostatný soubor od hlavního souboru vašich widgetů:<\/_SPAN><\/_P><\/_P> <\/_P style="text-align: center;">Cože?<\/H3>To je spousta informací a někdy je těžké mít všechna nastavení ve vašem projektu přesně správně, proto jsem sestavil ukázkový widget v GitHub repozitáři dostupný ke stažení zde: Web AppBuilder Typescript Examples<\/_A>. Všimněte si, že jsou tam 2 příklady představující 2 „styly“ projektů, proto si prosím přečtěte README soubor pro upřesnění, který použít. Také zvažujeme přidání možnosti TypeScript do Web AppBuilder Custom Widget Generator<\/_A>, a pokud máte nějakou zpětnou vazbu ohledně toho, co byste tam chtěli vidět, dejte nám vědět prostřednictvím tohoto GitHub issue<\/_A>. Děkujeme!<\/_P><\/_P>

Odkazy<\/_H3><\/_P>Web AppBuilder Typescript Examples<\/_A>ArcGIS Ideas: Maintain a Typescript definition file for jimu.js<\/_A>Esri Web AppBuilder Yeoman Generator: TypeScript Support<\/_A>

Děkuji členům vývojářské komunity

David Wilton<\/_A>, Alex Jones<\/_A> a Mike Tschudi<\/_A> za pomoc s kódem a repozitářem.<\/_P>