TypeScript 3.7 の Optional Chaining をつまみ食いする

TypeScript 3.7 Iteration Plan という issue が TypeScript に立っていて、追加される機能がリストアップされています。Optional Chaining とか Nullish Coalescing とかめちゃくちゃセクシーな機能てんこもりなんですが、まだそれらの PR はマージされていません。

でも試したい！ということで、まだマージされていない機能を引っ張ってきて使ってみましょう。ここでは Optional Chaining を試してみます。

Iteration Plan からは Suggestion: "safe navigation operator", i.e. x?.y #16 という issue へのリンクが張られていて、そこのタイトルの下には May be fixed by #33294 とあります。この #33294 が Optional Chaining を実装する PR で、そのマージ元は同じリポジトリ内の optionalChainingStage3 ブランチです。このブランチを使えば a?.b?.c できるってことですね。

さて、ブランチは分かったので、それをどうやって使うか、という話。ソースから TypeScript のコンパイラ tsc をビルドする方法は、ざっくりと TypeScript の README に書いてあります。

# リポジトリを clone してブランチをチェックアウト
git clone https://github.com/microsoft/TypeScript.git
cd TypeScript
git checkout optionalChainingStage3

# 依存をインストール
npm install
# グローバルに gulp をインストールする作業をケチって
# node_modules に入っているものを使います
npx gulp local

あとはコンパイル対象の TypeScript ファイルを test.ts などという名前で用意して node built/local/tsc.js test.ts を実行すれば、Optional Chaining を試せます。

$ cat test.ts
let a: any
console.log(`hogehoge ${a?.b?.c}`)

$ node built/local/tsc.js test.ts && node test.js
hogehoge undefined

$ cat test.js
var _a, _b;
var a;
console.log("hogehoge " + ((_b = (_a = a) === null || _a === void 0 ? void 0 : _a.b) === null || _b === void 0 ? void 0 : _b.c));

やったぜ 🎉

先走って試しちゃいましたが、Iteration Plan によると TypeScript 3.7 のベータリリースは10月1日の予定なので、そこでもっと簡単に試せるようになるでしょう。楽しみ！