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と増えていくと・・・いわゆるコールバック地獄になります。。
実際に試したい人向け
こちらからダウンロードできます。
動作確認
ダウンロードしたプロジェクトの中の
index.html
をブラウザで開いて “execute main()” ボタンをクリックすると、コンソール上に1秒おきにメッセージが出力されることを確認できます。
ビルド方法
npm install
でTypeScript 2.1.5 をインストールして
npm run tsc
で TypeScript をトランスパイルします。tsc だけで ES3/ES5 に変換できているのが非常に楽ですね!
Yarn を使っている人は
yarn install yarn run tsc
でもOKです。