TypeScript 2.1 から async/await が気軽に使えるようになっている件

– この記事は2017/02/03(Fri)現在の情報に基づいています –

なんで今更 async/await ？

TypeScript では既にバージョン 1.6 から async/await を使うことはできました。しかしこれまで、TypeScript から ES3/ES5 へ直接トランスパイルすることができませんでした。TypeScript に 加えて Babel も必要で、ビルド環境を作るのが若干面倒でした。

TypeScript コード　⇒　一旦 ES6 コードに変換　⇒　Babel を使って ES5 コードに変換

しかし、バージョン 2.1 から直接 ES3/ES5 コードに変換できるようになったので、より手軽に使えるようになったのです。

TypeScript で async/await を使ったサンプルコード

function sleep(milliseconds: number) {
  return new Promise<void>(resolve => {
    setTimeout(() => resolve(), milliseconds);
  });
}

async function main() {
  await sleep(1000);
  console.log('foo');
  await sleep(1000);
  console.log('bar');
  await sleep(1000);
  console.log('baz');
}

// Promise のメソッドチェーンで実現するとこうなる
// function main() {
//   sleep(1000)
//   .then(() => {
//     console.log('foo');
//     return sleep(1000);
//   })
//   .then(() => {
//     console.log('bar');
//     return sleep(1000);
//   })
//   .then(() => {
//     console.log('baz');
//   });
// }

sleep 関数は Promise オブジェクトを返す非同期関数ですが、async/await であたかも同期処理のように書くことができます。従来の方法よりはるかにスッキリかけるので、使わない手はありません！

ちなみに Pure ES5 だけで実現しようとすると・・・

function sleep2(milliseconds, callback) {
  setTimeout(function () {
    callback();
  }, milliseconds);
}

function main2() {
  sleep2(1000, function () {
    console.log('foo2');
    sleep2(1000, function () {
      console.log('bar2');
      sleep2(1000, function () {
        console.log('baz2');
      });
    });
  });
}

こうなります。3階層だからまだましですが、これが5、10と増えていくと・・・いわゆるコールバック地獄になります。。

実際に試したい人向け

こちらからダウンロードできます。

github.com

動作確認

ダウンロードしたプロジェクトの中の

index.html

をブラウザで開いて “execute main()” ボタンをクリックすると、コンソール上に１秒おきにメッセージが出力されることを確認できます。

ビルド方法

npm install

でTypeScript 2.1.5 をインストールして

npm run tsc

で TypeScript をトランスパイルします。tsc だけで ES3/ES5 に変換できているのが非常に楽ですね！

Yarn を使っている人は

yarn install
yarn run tsc

でもOKです。