第1回にあたります!他の記事は↓です。今風な開発フローを実現【TypeScript編】JavascripterからTypescripterとそろそろ言ってもいいかなって最近ちょっと思えるくらいTypeScriptを使っているKENです。色々なメディアを見ていてもどんどん脚光を浴びているTypeScript。.NETを割とがっつりやっていてよかったなぁ、と思っています。TypeScriptをしばらく触っていると生の、しかもES5以下のJavaScriptでがっつりSPAを書こうとは思えなくなってきます。一人だったらいいですけど、チームで1kステップを余裕で超えるソースの山を凡ミス無しでメンテしていける自信が無くなってきます。イケてないメソッド名とかクラス名作ったときに、後からリファクタできる容易さは本当に神がかり的です。VSCodeとかならF2をポチッとな。JetBrains系ならShift+F6をポチッとなで変えれるようになりますからね。これも流れ的にTypeScriptで書きたくなってきます。作ったプロジェクトをTypeScriptに移行する方法を載せたいと思います。力を借りたいと思います。インストールしているものとして話を進めます。app?(Y/n):n作ったプロジェクトのフォルダに移動しましょう。ionic-typescriptとりあえずプロジェクトが開始できるかお試し。作りたてのプロジェクトのフォルダ構成は↓のような状態だと思います。別の場所でTS(TypeScriptファイル)を管理していきます。配下にTSファイルを置くことにします。イメージの違いは↓のようになります。ファイルの引っ越しをしましょう!これをすると当然ですけど一時的にプロジェクトは壊れて動かなくなります!以下、コマンドを載せますけどGUIでやっても全然OK。JavaScriptはTypeScriptなのです!なので、拡張子を変換しただけで一応TypeScriptに変換が完了した、と言ってもOK。↑のmvの際にやってもよかったんですけど、一応順番に、ということで。これはとりあえず.jsを.tsに拡張子変換してくれるおまじないだと思って下さい。↑のmvの際にやってもよかったんですけど、一応順番に、ということで。これはとりあえず.jsを.tsに拡張子変換してくれるおまじないだと思って下さい。使っていろいろとごにょごにょします。部分だけお願いをします。インストールしましょう。超重要なんですけど、とりあえずは「なんか色々と変換してくれる人」って覚えてくれてて良いと思います。インストールしましょう。自身もインストールしておきます。ファイルを準備してあげる必要があります。いうフォルダの中で管理します。とでも命名しておきましょう。ファイルの中身は以下のようにしておきます。好きなエディタで編集して保存してください。詳細については触れません(奥が深いので)。定義されている場所にしますよ、って内容です(ざっくり!)。↑の手順で一通り完成!と言いたいところですが、今度はTypeScriptのコンパイラに対して、TypeScriptをどうやってコンパイル(transpile)するのか教えてあげないといけません。ファイルを作成します。中身は↓のようにします。単純にコマンドを並べてしまったほうがわかりやすいと私は思っています。再度タスクを自動で実行してくれるという便利なやつです。再度叩いてみましょう。壊れていたアプリがまた復活しているのが確認できると思います。あるので、インストールします。↓の内容にしてください。それぞれのタスクの前や後に実行するタスクを指定できます。