Widgets Personalizados do Web AppBuilder em TypeScript

GavinRehkemper

<\/HEAD>

Se você é um desenvolvedor JavaScript, pode ter ouvido falar do TypeScript<\/A>, um superconjunto tipado de JavaScript que compila para JavaScript puro. Se você também está criando widgets personalizados para o Web AppBuilder, usar TypeScript em um widget é uma ótima maneira de começar com TypeScript. Aqui estão algumas notas e dicas que descobri ao usar TypeScript dentro de um fluxo de trabalho de desenvolvimento de widget personalizado para Web AppBuilder.<\/P>

<\/P>

Contexto<\/H3><\/P>Meu fluxo de trabalho usual de desenvolvimento para Web AppBuilder é ter meu código do widget em seu próprio repositório de código e usar um task runner como Grunt ou Gulp para compilar e copiar automaticamente meu código para os lugares corretos (o diretório stemapp e opcionalmente o diretório server do app no qual estou trabalhando atualmente). Dentro desse contexto, TypeScript assume o papel de "transpiler" onde Babel poderia estar atualmente na sua stack.<\/P><\/P>Arquivo tsconfig.json<\/H3><\/P>Muitos aspectos do seu arquivo tsconfig.json são por projeto, mas há algumas coisas que você precisa:<\/P>"module": "amd" - escolhemos "amd" porque AMD<\/A> é o estilo de módulo que o Web AppBuilder espera ver ao carregar um widget em um app.<\/LI>"moduleResolution": "classic" - porque escolhemos "AMD" acima<\/LI>"target": "es5" - o tipo ECMAScript JavaScript que queremos que o compilador TypeScript gere. Queremos direcionar para es5 para que o código que escrevemos em JavaScript estilo ES6 seja convertido para que navegadores mais antigos possam lê-lo.<\/LI>"types": [ "arcgis-js-api", "dojo-typings"] - os nomes das definições de tipo que queremos incluir.<\/LI>"inlineSources" e "inlineSourceMap" - defina esses como true se você tiver um sistema de build que move código, para que seus mapas de origem funcionem ao depurar no navegador.<\/LI><\/OL>

<\/P>

Exemplo completo

aqui<\/A>. <\/P>

<\/P>

Declare Decorator<\/H3><\/P>Esta é a chave principal para todo o processo. Ela informa ao compilador TypeScript como traduzir sua sintaxe de classe estilo ES6 no seu arquivo Widget.ts para a sintaxe define\/declare estilo Dojo que o Web AppBuilder espera. Este trecho de código pode ser obtido do repositório dojo\/typings<\/A>, e incluído nos seus arquivos de widget. Você então importa ele no seu arquivo Widget.ts<\/A>, e aplica o decorator na sua classe Widget<\/A>. Note que decorators são experimentais<\/A> no momento, então eles podem ser removidos do TypeScript no futuro, mas por enquanto esta é uma boa opção que mantém nosso código limpo.<\/P>

<\/P>

Promises<\/H3><\/P>Eu gostaria de escrever código o mais próximo possível do verdadeiro JavaScript ES6. Então eu gostaria de usar a sintaxe nativa Promise do JavaScript. Mas quando tentei fazer isso no meu widget, inicialmente recebi um erro, "error TS2693: 'Promise' only refers to a type, but is being used as a value here." Para resolver esse problema, tudo que precisei fazer foi adicionar a biblioteca "es6-promise" à propriedade "lib" no arquivo "tsconfig.json". Veja a linha "--lib" na Tabela de Opções do Compilador TypeScript<\/A> para mais informações - incluindo uma explicação sobre por que estou incluindo dom, es5, etc., bem como opções que você pode adicionar além de es2015.promise.<\/P>

<\/P>

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

["dom", "es5", "scripthost", "es2015.promise"]

Sourcemaps<\/H3>Achei mais fácil se você definir "inlineSources" e "inlineSourceMap" no seu arquivo "tsconfig.json" como true. Caso contrário, o caminho do sourcemap geralmente está errado. O código TS aparece como um arquivo separado do seu arquivo principal dos widgets:
 
Como assim?

Isso é muita informação, e às vezes é difícil acertar todas as configurações no seu projeto exatamente corretas, então eu montei um widget exemplo em um repositório GitHub disponível para download aqui: Exemplos Web AppBuilder Typescript<\/A>. Note que há 2 exemplos lá que representam 2 "estilos" de projeto, então por favor leia o arquivo README para esclarecimento sobre qual usar. Também estamos considerando incluir uma opção TypeScript no Gerador Custom Widget do Web AppBuilder<\/A>, e se você tiver algum feedback sobre o que gostaria de ver lá, por favor nos avise via este issue no GitHub<\/A>. Obrigado!

Links

• Exemplos Web AppBuilder Typescript<\/A>
• ArcGIS Ideas: Manter um arquivo de definição Typescript para jimu.js<\/A>
• Gerador Yeoman do Esri Web AppBuilder: Suporte a TypeScript<\/A>

Obrigado aos membros da comunidade desenvolvedora David Wilton<\/A>, Alex Jones<\/A>, e Mike Tschudi<\/A> pela ajuda com o código e repositório.