TypeScript
非同期
ES5
ES3

TypeScript 2.1でES3/ES5コードにasync/awaitを使う

More than 1 year has passed since last update.

TypeScript 2.1でターゲットがES3/ES5でも、async/awaitが使えるようになりました。
(※以前は、ES2015(ES6)ターゲットのときのみ利用可能でした。)

私は、非同期APIのテストで活用しています。

サンプルコードは以下のURLの「Downlevel Async Functions」で確認できます。
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html

tsconfig.jsonでlibを追加します。

  • "dom", "es2015"
  • もしくは "dom", "es2015.promise", "es5"
tsconfig.json
{
    "compilerOptions": {
        "lib": ["dom", "es2015.promise", "es5"]
    }
}
  • 以下のサンプルの場合、Helloと出力後、500ミリ秒おきに "." が3回出力され、最後に "World!"と出力されます。
dramaticWelcome.ts
function delay(milliseconds: number) {
    return new Promise<void>(resolve => {
        setTimeout(resolve, milliseconds);
    });
}

async function dramaticWelcome() {
    console.log("Hello");

    for (let i = 0; i < 3; i++) {
        await delay(500);
        console.log(".");
    }

    console.log("World!");
}

dramaticWelcome();