目的
Flash Professional Toolkit for CreateJSのファーストステップガイド で紹介されているようなやり方、つまり、Flashでデザインやアニメーションを作成し、それを利用しながらJavascriptで機能を作っていく場合に、Javascriptの替りにTypeScriptを利用したい。
しかし、Flash Pro CCはもちろんTypeScript用の*.d.tsファイルを出力してくれないし、手で書くのは辛くて無理なのでどうにかしたい。
利用するもの
CreateJS Toolkit definitions generatorが*.d.tsファイルを出力してくれるのでこれを利用する。
以上、終了、なわけですが、一部生成されたファイルに手を入れないといけないので、それのメモ。だいぶ抜けてるかも。
手順
基本的にはFlash Professional Toolkit for CreateJSのファーストステップガイド の通りに進める。
異なるのは、GameDev.jsがGameDev.tsになり、それに伴ってPlatypusGame.d.tsが必要になる点。
一応、現在時点で全て最新版を利用、TypeScriptとしてエラー、警告が出なくなるまでの対応手順が以下ですが、今後、createjs, Flash Pro, Typescriptのバージョンが上がるに従って、ぜんぜん違う対処が必要になる、もしくは対処が要らなくなる可能性が高そうです。
ちなみに、createjsの*.d.tsはDefinitely Typedを利用させてもらってます。
1. *.d.tsを生成
CreateJS Toolkit definitions generatorを利用して、PlatypusGame.d.tsファイルを生成。
一部書き換えが必要になる。
- ファイル冒頭、easeljs.d.tsの参照パス指定を実際のパスに変更
- module libで定義が始まってるが、declare module libに変更
- 各クラスのnominalBoundsがstaticで定義されてるが、クラス名.nominalBoundsではエラーになる(そのままjsに変換されてしまう、prototype経由なら大丈夫だがそうならない)のでsaticを全て取り除く
2. GameDev.jsをGameDev.tsに変更
拡張子変更だけだと警告が出まくるので(当たり前ですが)、とりあえずそれを取り除く。
- 必要なreferenceを追加
- platypus.falling等、定義されてないプロパティへの代入はTypeScript的には警告対象なのでplatypus['falling'] = false等へ変更。
- onClick等一部書き方が古いのでaddEventListner等に置き換え
- handleFileLoad等のイベントハンドラが(eventObj: Object) => booleanでなければならないのに、(evt: any) => voidなのでメソッド末尾にreturn true;とかを追加
- IntelliJ IDEAの問題(自分はPhpStormを利用)だろうと思いますが、createjs.Container.addChild等で、型としては継承関係上問題ないはずなのに警告が出るので、addChild(<createjs.DisplayObject>obj)等、明示的にアップキャストする
くらいで動いた。