TypeScriptでのカスタムWeb AppBuilderウィジェット

GavinRehkemper

<\/HEAD>

もしあなたがJavaScript開発者なら、TypeScript<\/A>をご存知かもしれません。TypeScriptはJavaScriptの型付きスーパーセットで、プレーンなJavaScriptにコンパイルされます。カスタムWeb AppBuilderウィジェットを作成している場合、ウィジェット内でTypeScriptを使うことはTypeScriptを始めるのに最適な方法です。ここでは、Web AppBuilderのカスタムウィジェット開発ワークフロー内でTypeScriptを使用する際に私が発見したいくつかの注意点とヒントを紹介します。<\/P>

<\/P>

背景<\/H3><\/P>私の通常のWeb AppBuilder開発ワークフローは、ウィジェットコードを独自のコードリポジトリに置き、GruntやGulpのようなタスクランナーを使ってコードを自動的にコンパイルし、現在作業中のアプリのstemappディレクトリおよびオプションでserverディレクトリにコピーするというものです。この文脈では、TypeScriptはBabelが現在あなたのスタックにあるかもしれない「トランスパイラ」の役割を果たします。<\/P><\/P>tsconfig.jsonファイル<\/H3><\/P>tsconfig.jsonファイルの多くの側面はプロジェクトごとに異なりますが、必要なものがいくつかあります:<\/P>"module": "amd" - Web AppBuilderがウィジェットをアプリにロードするときに期待するモジュールスタイルであるAMD<\/A>を選択しています。<\/LI>"moduleResolution": "classic" - 上記で"AMD"を選択したため。<\/LI>"target": "es5" - TypeScriptコンパイラが出力するECMAScript JavaScriptのタイプです。ES6スタイルのJavaScriptで書いたコードを古いブラウザでも読めるようにes5に変換したいためです。<\/LI>"types": [ "arcgis-js-api", "dojo-typings"] - 含めたい型定義の名前です。<\/LI>"inlineSources" と "inlineSourceMap" - ビルドシステムがコードを移動させている場合はこれらをtrueに設定すると、ブラウザでデバッグするときにソースマップが機能します。<\/LI><\/OL>

<\/P>

完全な例は

こちら<\/A>です。 <\/P>

<\/P>

Declare Decorator<\/H3><\/P>これは全体のプロセスの主要な鍵です。TypeScriptコンパイラに対して、Widget.tsファイル内のES6スタイルクラス構文をWeb AppBuilderが期待するDojoスタイルのdefine\/declare構文にどのように変換するかを指示します。このコードはdojo\/typingsリポジトリから取得可能<\/A>で、ウィジェットファイルに含めることができます。その後Widget.tsファイルにインポートし<\/A>、Widgetクラスにデコレーターを適用します<\/A>。なおデコレーターは現在実験的機能です<\/A>ので将来的にはTypeScriptから削除される可能性もありますが、現時点ではコードをきれいに保つ良い方法です。<\/P>

<\/P>

Promises<\/H3><\/P>できるだけ真のES6 JavaScriptに近いコードを書きたいと思っています。そのためネイティブJavaScript Promise構文を使いたいですが、最初ウィジェットで試したとき「error TS2693: 'Promise' only refers to a type, but is being used as a value here.」というエラーが出ました。この問題を解決するには、「tsconfig.json」ファイルの「lib」プロパティに「es6-promise」ライブラリを追加するだけでした。詳細はTypeScript Compiler Options Table<\/A> の "--lib" 行をご覧ください。domやes5なども含めている理由や、es2015.promise以外にも追加できるオプションについて説明があります。<\/P>

<\/P>

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

Sourcemaps<\/_H3><\/_P>私は「tsconfig.json」ファイルで「inlineSources」と「inlineSourceMap」をtrueに設定するのが最も簡単だと感じました。そうしないとソースマップのパスが間違っていることが多いです。TSソースはメインウィジェットファイルとは別ファイルとして表示されます:<\/_SPAN> <\/_p>えっ？

情報量が多く、プロジェクト内のすべての設定を正確に行うのは時々難しいので、GitHubリポジトリで利用可能なサンプルウィジェットをご用意しました： Web AppBuilder Typescript Examples。そこには2つの異なる「スタイル」のプロジェクト例がありますので、どちらを使うかについてはREADMEファイルをご覧ください。また、TypeScriptオプションをWeb AppBuilder Custom Widget Generator に追加することも検討しており、ご要望があればこのGitHub issue経由でお知らせください。ありがとうございます！

リンク

• Web AppBuilder Typescript Examples
• ArcGIS Ideas: Maintain a Typescript definition file for jimu.js
• Esri Web AppBuilder Yeoman Generator: TypeScript Support

コードとリポジトリへの支援については開発者コミュニティメンバーのDavid Wiltonさん、Alex Jonesさん、およびMike Tschudiさんに感謝します。