マイクロソフトがTypeScript 2.4をリリース。動的importでモジュールの遅延ロード実現。列挙型に文字列を指定可能など

マイクロソフトは、JavaScriptをターゲットとして生成するいわゆるAltJS言語「TypeScript 2.4」のリリースを発表しました。

動的なモジュールのインポートを記述可能に

TypeScript 2.4の目玉機能は、ECMAScript.nextで検討中の機能である動的なモジュールのインポートを、import()として記述できるようにしたことです。

import()を利用することで、ある機能が必要になった時点でその機能を含むモジュールをロードする、いわゆる遅延ロードを実現するコードを記述できるようになります。

下記はTypeScriptブログの記事「Announcing TypeScript 2.4」から、import()を用いた遅延ロードのコード例です。ファイルをZip圧縮で処理する場面になったときにそのモジュールをインポートし、実行して結果を返す処理を非同期で実行するように記述しています。

async function getZipFile(name: string, files: File[]): Promise<File> {
    const zipUtil = await import('./utils/create-zip-file');
    const zipContents = await zipUtil.getAsBlob(files);
    return new File(zipContents, name);
}

説明によると、多くのバンドラー（おそらくWebpackやBrowserifyなど）がこのimport()をベースにした自動分割とバンドルの出力をサポートしているとのこと。

Many bundlers have support for automatically splitting output bundles (a.k.a. “code splitting”) based on these import()expressions, so consider using this new feature with the esnext module target. Note that this feature won’t work with the es2015 module target, since the feature is anticipated for ES2018 or later.

多くのバンドラーがすでに自動分割とバンドルの出力（別名“コードスプリッティング”）をこのimport()式をベースにサポートしている。そこで、この新機能をESnextのモジュールターゲットで利用することを検討していただきたい。
注意として、ES2015のモジュールターゲットでは機能しない、というのもこの機能はES2018もしくはそれ以降で予定されるからだ。
（「Announcing TypeScript 2.4 | TypeScript」から）

動的インポートによって初期ロードのJavaScriptを小さく抑えることができ、そのおかげで短いロード時間ですばやいWebアプリケーションの起動が期待できるはずです。TypeScriptで試してみたい開発者は多いのではないでしょうか。

列挙型の初期値に文字列を指定可能

列挙型の初期値に文字列のリテラルを指定可能になりました。これで、より分りやすくデバッグしやすいコードが書けるようになったとのこと。

enum Colors {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE",
}

そのほかTypeScript 2.4ではGenericsの型推論によるチェックが改善されるなど、多くの新機能が追加されています。