Zenn
📝

compilerOptions.jsx の設定について

2024/01/02に公開
React
TypeScript
JSX
tsx
tech

投稿の目的

サイト構築中に学んだことを書き留める備忘録です。

tsconfig.jsonの compilerOptions.jsx の設定は、TypeScriptが .tsx ファイル内のJSX構文をどのようにJavaScriptファイルに変換するかを制御します。JSXとは、Reactコンポーネントを記述するためのHTMLに似た構文です。この設定にはいくつかの異なるオプションがあり、それぞれがJSXを異なる方法でJavaScriptに変換します。

変換前のコード（.tsx）

export const HelloWorld = () => <h1>Hello world</h1>;

変換後のコード（.js）

"jsx": "react"

  • JSXを React.createElement 呼び出しに変換します。
  • これはReactの古いバージョンで一般的な変換方法です。
import React from 'react';
export const HelloWorld = () => React.createElement("h1", null, "Hello world");

"jsx": "react-jsx"

  • JSXを _jsx 呼び出しに変換します。
  • React 17以降で導入された新しい変換方式です。
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
export const HelloWorld = () => _jsx("h1", { children: "Hello world" });

"jsx": "react-jsxdev"

  • _jsxDEV を使ってJSXを変換します。
  • これはReact 17以降の開発モード用で、デバッグに有用な追加情報を提供します。
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
const _jsxFileName = "/home/runner/work/TypeScript-Website/TypeScript-Website/index.tsx";
import React from 'react';
export const HelloWorld = () => _jsxDEV("h1", { children: "Hello world" }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 32 }, this);

"jsx": "preserve"

  • JSXをそのまま保持し、.jsx ファイルとして出力します。
  • 後のビルドステップ（例えばBabel）でJSXを処理する場合に使います。
import React from 'react';
export const HelloWorld = () => <h1>Hello world</h1>;

"jsx": "react-native"

  • JSXをそのまま残し、.js ファイルとして出力します。
  • React Nativeプロジェクト向けの設定です。
import React from 'react';
export const HelloWorld = () => <h1>Hello world</h1>;

Discussion