TypeScriptコンパイラが吐き出すコードについてのノート

TypeScriptの--esModuleInteropは一体何をやっているのか
という記事をみて、気になったのでTypeScriptのコンパイル結果について調べていく。

適当にコンパイルしたものの__importStar関数が記事のものと微妙に違うのがきになった。

var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+   __setModuleDefault(result, mod);
-    result["default"] = mod;
    return result;
};

単純な代入が __setModuleDefault(resul, mod) という関数を呼ぶ形式になっている。そこで、今度はこの関数をながめてみる。

var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});

rutamu30

this && this.__setModuleDefault
if (a && b) のような形でよく使うのでbooleanが返りそうなイメージだったけど、a && bの返り値はbになる。
Object.create ? ... : ....
Object.createはES5で追加されたのでES5orそれ以前かの判定(?)
o["default"] = v;
ES5より前のバージョンでは単純にプロパティ'default'としてモジュールを代入
Object.defineProperty(o, "default", { enumerable: true, value: v });
ES5以降ではObject.definePropertyを利用して'default’にモジュールを代入。下のように再代入による上書き(writable)、プロパティのコンフィグの変更(configurable)ができないのが単純な代入との違い。これで意図しない更新を防いでいるのだと思う。

const o = Object.create(null);

Object.defineProperty(o, "default", { value: 42, enumerable: true });

o["default"] = 99;
console.log(o["default"]); // 42

// TypeError: Cannot redefine property: default
// Object.defineProperty(o, "default", { writable: true });

このスクラップは2021/05/10にクローズされました