compilerOptions.jsx の設定について

投稿の目的

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

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>;