Open2023/04/15にコメント追加2

Reactのトランスパイルを試してみていたメモ

<Component {...obj} />とすると、objが展開されてComponentに渡されることを示した例。Babelでトランスパイル。

よく<Component {...props} />とかで見るやつ。

// JSX
const Render = () => {
  const size = { width: 5, height: 10 }
  return <Rectangle {...size} hoge="hogehoge" />
}

// トランスパイル後
const Render = () => {
  const size = {
    width: 5,
    height: 10
  };
  return _jsx(Rectangle, {
    // ここのオブジェクト(=props)にスプレッド展開されたままの形で入る
    ...size,
    hoge: "hogehoge"
  });
};

kou

ついでにuhyoさんの記事が学びになった。

よくtsconfigの設定で、

{
  "compilerOptions": {
    // ...
    "jsx": "react-jsx",
    // ...
  }
}

とか見るのは、TypeScriptのコンパイラでReactの新変換方式(ex. _jsx)を指定しているものだったのか。

uhyoさんの記事参照

Nextはデフォルトで"jsx": "preserve"になっている気がするけれど、あれはSWCコンパイラにコンパイルを移譲しているからTSCでは何も行なわない"preserve"設定になっているのかな。