読者です 読者をやめる 読者になる 読者になる

TypeScript - アロー関数でオブジェクトリテラルを返そうとしてちょっとはまった話

いい解決方法が見つかったわけではありませんが、ちょっとはまった記念に残しておきます。

TypeScriptで次のようにアロー関数を使って単にオブジェクトリテラルを返そうとしたのですが、コンパイルエラーに・・・。

// TypeScript
[1, 2, 3].map((value, index) => {
    value: value,
    index: index
});

しばらく原因がわからずいろいろ試したり調べたりしていましたが、どうやらオブジェクトリテラル{がfunctionの開始ブロックとして解釈されている様子。

ということが次のTypeScriptのコードから出力されるJavaScriptで確認できるかなと思います。

// TypeScript
[1, 2, 3].map((value, index) => {
});

// 出力されるJavaScript
[1, 2, 3].map(function (value, index) {
});

すっきり書く方法がないか調べていると、オブジェクトリテラルを括弧()で囲んでるサンプルは見つけたんですが、この方法だとちょっと戸惑うような気もするし、()はそのままJavaScriptにも出力されるので、うーん・・・って感じです。

// TypeScript
[1, 2, 3].map((value, index) => ({
    value: value,
    index: index
}));

// 出力されるJavaScript
[1, 2, 3].map(function (value, index) {
    return ({
        value: value,
        index: index
    });
});

いさぎよくfunctionを使う方がいいのかしら。