Widgets personnalisés Web AppBuilder en TypeScript

GavinRehkemper

<\/HEAD>

Si vous êtes développeur JavaScript, vous avez peut-être entendu parler de TypeScript<\/A>, un sur-ensemble typé de JavaScript qui se compile en JavaScript simple. Si vous créez également des widgets personnalisés Web AppBuilder, utiliser TypeScript dans un widget est une excellente façon de commencer avec TypeScript. Voici quelques notes et conseils que j'ai découverts en utilisant TypeScript dans un flux de travail de développement de widget personnalisé Web AppBuilder.<\/P>

<\/P>

Contexte<\/H3><\/P>Mon flux de travail habituel pour le développement Web AppBuilder consiste à avoir mon code de widget dans son propre dépôt de code, et à utiliser un task runner comme Grunt ou Gulp pour compiler automatiquement et copier mon code aux bons endroits (le répertoire stemapp et éventuellement le répertoire server de l'application sur laquelle je travaille actuellement). Dans ce contexte, TypeScript remplit le rôle de "transpileur" là où Babel pourrait actuellement se trouver dans votre stack.<\/P><\/P>Fichier tsconfig.json<\/H3><\/P>Beaucoup d'aspects de votre fichier tsconfig.json sont spécifiques à chaque projet, mais il y a quelques éléments dont vous avez besoin :<\/P>"module": "amd" - nous choisissons "amd" car AMD<\/A> est le style de module que Web AppBuilder attend lors du chargement d'un widget dans une application.<\/LI>"moduleResolution": "classic" - parce que nous avons choisi "AMD" ci-dessus<\/LI>"target": "es5" - le type ECMAScript JavaScript que nous voulons que le compilateur TypeScript produise. Nous ciblons es5 afin que le code que nous écrivons en JavaScript style ES6 soit converti pour que les navigateurs plus anciens puissent le lire.<\/LI>"types": [ "arcgis-js-api", "dojo-typings"] - les noms des définitions de types que nous voulons inclure.<\/LI>"inlineSources" et "inlineSourceMap" - mettez-les à true si vous avez un système de build qui déplace le code, afin que vos sourcemaps fonctionnent lors du débogage dans le navigateur.<\/LI><\/OL>

<\/P>

Exemple complet

ici<\/A>. <\/P>

<\/P>

Déclarer Decorator<\/H3><\/P>C'est la clé principale de tout le processus. Il indique au compilateur TypeScript comment traduire votre syntaxe de classe style ES6 dans votre fichier Widget.ts en la syntaxe define\/declare style Dojo que Web AppBuilder attend. Ce bout de code peut être obtenu depuis le dépôt dojo\/typings<\/A>, et inclus dans vos fichiers widget. Vous l'importez ensuite dans votre fichier Widget.ts<\/A>, et appliquez le décorateur sur votre classe Widget<\/A>. Notez que les décorateurs sont expérimentaux<\/A> pour l'instant, ils pourraient donc potentiellement être retirés de TypeScript à l'avenir, mais pour l'instant c'est une bonne option qui garde notre code propre.<\/P>

<\/P>

Promises<\/H3><\/P>Je souhaite écrire du code aussi proche que possible du vrai JavaScript ES6. Donc je voudrais utiliser la syntaxe native Promise de JavaScript. Mais quand j'ai essayé cela dans mon widget, j'ai initialement eu une erreur, "error TS2693: 'Promise' ne fait référence qu'à un type, mais est utilisé ici comme une valeur." Pour résoudre ce problème, il m'a suffi d'ajouter la bibliothèque "es6-promise" à ma propriété "lib" dans le fichier "tsconfig.json". Voir la ligne "--lib" dans la Table des options du compilateur TypeScript<\/A> pour plus d'informations - y compris une clarification sur pourquoi j'inclus dom, es5, etc., ainsi que des options que vous pouvez ajouter autres que es2015.promise.<\/P>

<\/P>

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

Sourcemaps<\/_H3><\/_P><\/_P>J'ai trouvé qu'il est plus simple si vous réglez "inlineSources" et "inlineSourceMap" dans votre fichier "tsconfig.json" à true. Sinon, le chemin du sourcemap est souvent incorrect. La source TS apparaît comme un fichier séparé de votre fichier principal des widgets :<\/_SPAN><\/_P><\/_P> <\/_P>Hein ?<\/_H3><\/_P><\/_P>C'est beaucoup d'informations, et il est parfois difficile d'avoir tous les réglages exacts dans votre projet, alors j'ai mis en place un widget exemple dans un dépôt GitHub disponible au téléchargement ici : Exemples TypeScript Web AppBuilder<\/_A>. Notez qu'il y a 2 exemples qui représentent 2 "styles" de projet, veuillez donc lire le fichier README pour clarifier lequel utiliser. Nous envisageons également d'ajouter une option TypeScript dans le Générateur Web AppBuilder Custom Widget<\/_A>, et si vous avez des retours sur ce que vous aimeriez voir là-bas, merci de nous en faire part via ce ticket GitHub<\/_A>. Merci !<\/_P><\/_P>

Liens<\/_H3><\/_P>Exemples TypeScript Web AppBuilder<\/_A>Idées ArcGIS : Maintenir un fichier de définition Typescript pour jimu.js<\/_A>Générateur Yeoman Esri Web AppBuilder : Support TypeScript<\/_A><\/_P><\/_P>Merci aux membres de la communauté développeurs David Wilton<\/_A>, Alex Jones<\/_A>, et Mike Tschudi<\/_A> pour leur aide sur le code et le dépôt.<\/_P>