Angular2 (ver2.0.x)で async/await機能を導入する

背景

Angular2のhttpモジュールを使っているとよくある話だと思いますが、このhttpモジュールで取得したデータを、変数に保存して直ぐに参照すると保存されておらず、undefinedなどの理由でエラーになることがありますよね。（特にconsole.logなどで参照してやりがち…）

このhttpモジュールのhttp通信は非同期処理で、戻り値はObservableまたは変換したPromiseオブジェクト。これが『将来的には格納される値』なので起こるようです。

上級プログラマの方は対処できると思いますが、私はそうでもないので、どうしよう？と思ってしまいました。

（更なる背景は、OAuth2のトークンを取得して直ぐ使いたい、ということだったんですが、それについては、こちら）

async/await機能が使える環境を構築する

そして、こういうときは待ち合わせ機能を記述しますが、Typescriptではasync/await機能が用意されていますので、これを使いたいところです。（書き方はこちらの記事とこちらの本）

しかし、どうして、現時点（2016年12月〜2017年1月時点）では、ng newコマンドで作ったAngular2のデフォルトの環境では使えないので、少し設定を変更する必要があります。

async/await機能を使えるのは、
a) 開発環境Typescript 1.7以上　+ 実行環境 ES6
b) 開発環境Typescript 2.1以上　+ 実行環境 ES5

という条件ですが、現時点ではAngular2の環境は、Typescript 2.0.x + ターゲット実行環境 ES5ですので、a) か b) に合わせることになります。結論としては、a) は可能、b) は難しいようです。

a) の設定は、tsconfig.jsonで、コンパイルオプションであるtarget実行環境をes5からes6に変更することで実現できます。

tsconfig.json（2016年12月時点）

{
  "compilerOptions": {
    "lib": ["es6", "dom"],
（中略）
    "module": "es6",
（中略）
    "target": "es5",
  }
}

この最後の"target"を"es6"にします。

以前では、Babelを使ってさらにコンパイルをかける必要があったようですが、今回は必要ではありませんでした。

もう一つの方法 b) は、設定ファイルだと以下の個所が該当します。

package.json（2016年12月時点）

  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
（中略）
    "typescript": "~2.0.3"
  }

ところが、ES5をサポートしたType script2.1ですが、Angular2の環境で、単純にupdateすることができません。

2016年12月の時点では、Type Script 2.1に上げるとAngularがエラーになる、更にAngular-cliがハングするという事象が報告されています。→文中の「Just don’t upgrade if you’re using Angular 2! Breaks Angular-cli (hangs while trying to build project).」です。