Widgets personalizados de Web AppBuilder en TypeScript

GavinRehkemper

<\/HEAD>

Si eres un desarrollador de JavaScript, es posible que hayas oído hablar de TypeScript<\/A>, un superconjunto tipado de JavaScript que se compila a JavaScript simple. Si también estás creando widgets personalizados para Web AppBuilder, usar TypeScript en un widget es una excelente manera de comenzar con TypeScript. Aquí hay algunas notas y consejos que he descubierto mientras usaba TypeScript dentro de un flujo de trabajo de desarrollo de widgets personalizados para Web AppBuilder.<\/P>

<\/P>

Antecedentes<\/H3><\/P>Mi flujo de trabajo habitual para el desarrollo en Web AppBuilder es tener el código de mi widget en su propio repositorio de código y usar un task runner como Grunt o Gulp para compilar y copiar automáticamente mi código a los lugares correctos (el directorio stemapp y opcionalmente el directorio server de la aplicación en la que estoy trabajando actualmente). Dentro de este contexto, TypeScript cumple el rol de "transpiler" donde Babel podría estar actualmente en tu stack.<\/P><\/P>Archivo tsconfig.json<\/H3><\/P>Muchos aspectos de tu archivo tsconfig.json son por proyecto, pero hay algunas cosas que necesitas:<\/P>"module": "amd" - elegimos "amd" porque AMD<\/A> es el estilo de módulo que Web AppBuilder espera ver al cargar un widget en una aplicación.<\/LI>"moduleResolution": "classic" - porque elegimos "AMD" arriba<\/LI>"target": "es5" - el tipo ECMAScript JavaScript que queremos que el compilador TypeScript genere. Queremos apuntar a es5 para que el código que escribimos en JavaScript estilo ES6 se convierta para que navegadores antiguos puedan leerlo.<\/LI>"types": [ "arcgis-js-api", "dojo-typings"] - los nombres de las definiciones de tipos que queremos incluir.<\/LI>"inlineSources" y "inlineSourceMap" - configúralos en true si tienes un sistema de construcción que mueve código, para que tus mapas fuente funcionen al depurar en el navegador.<\/LI><\/OL>

<\/P>

Ejemplo completo

aquí<\/A>. <\/P>

<\/P>

Declarar Decorador<\/H3><\/P>Esta es la clave principal de todo el proceso. Le dice al compilador TypeScript cómo traducir tu sintaxis de clase estilo ES6 en tu archivo Widget.ts al estilo Dojo define\/declare que Web AppBuilder espera. Este fragmento de código puede obtenerse del repositorio dojo\/typings<\/A>, e incluirse en tus archivos del widget. Luego lo importas en tu archivo Widget.ts<\/A>, y aplicas el decorador a tu clase Widget<\/A>. Ten en cuenta que los decoradores son experimentales<\/A> ahora mismo, por lo que podrían eliminarse potencialmente de TypeScript en el futuro, pero por ahora esta es una buena opción que mantiene nuestro código limpio.<\/P>

<\/P>

Promises<\/H3><\/P>Me gustaría escribir código lo más cercano posible a JavaScript ES6 verdadero. Así que me gustaría usar la sintaxis nativa JavaScript Promise. Pero cuando intenté hacer esto en mi widget, inicialmente obtuve un error, "error TS2693: 'Promise' solo se refiere a un tipo, pero se está usando como valor aquí." Para resolver este problema, todo lo que tuve que hacer fue agregar la biblioteca "es6-promise" a mi propiedad "lib" en el archivo "tsconfig.json". Consulta la línea "--lib" en la Tabla de Opciones del Compilador TypeScript<\/A> para más información, incluyendo una aclaración sobre por qué incluyo dom, es5, etc., así como opciones adicionales que puedes agregar además de es2015.promise.<\/P>

<\/P>

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

Sourcemaps<\/_H3><\/_P><\/_P>Encontré que es más fácil si configuras "inlineSources" y "inlineSourceMap" en tu archivo "tsconfig.json" a true. De lo contrario, la ruta del sourcemap suele ser incorrecta. El código fuente TS aparece como un archivo separado del archivo principal de tus widgets:<\/_SPAN><\/_P><\/_P style="text-align: center;">¿Eh?<\/_H3><\/_P><\/_P>Es mucha información, y a veces es difícil configurar todos los ajustes exactamente correctos en tu proyecto, así que he preparado un widget ejemplo en un repositorio GitHub disponible para descargar aquí: Ejemplos TypeScript para Web AppBuilder<\/_A>. Nota que hay 2 ejemplos allí que representan 2 "estilos" de proyecto, así que por favor lee el archivo README para aclarar cuál usar. También estamos considerando incluir una opción TypeScript en el Generador Custom Widget para Web AppBuilder<\/_A>, y si tienes algún comentario sobre lo que te gustaría ver allí, por favor háznoslo saber mediante este issue en GitHub<\/_A>. ¡Gracias!<\/_P><\/_P>

Enlaces<\/_H3><\/_P>Ejemplos TypeScript para Web AppBuilder<\/_A>ArcGIS Ideas: Mantener un archivo de definición Typescript para jimu.js<\/_A>Generador Yeoman Esri Web AppBuilder: Soporte TypeScript<\/_A><\/_P><\/_P>Gracias a los miembros de la comunidad desarrolladora David Wilton<\/_A>, Alex Jones<\/_A>, y Mike Tschudi<\/_A> por su ayuda con el código y el repositorio.<\/_P>