TypeScript で「Cannot use JSX unless the '--jsx' flag is provided」が解決できない

要約

このエラー（TS17004）は、JSX を含むコードを jsx コンパイラオプション無しでコンパイルしようとしたときに出る。tsconfig.json の compilerOptions.jsx に react-jsx などを設定し、ファイル拡張子を .tsx にすれば解決する。

よくある原因

1. jsx オプション未設定: tsconfig.json に jsx が無いと、TypeScript は JSX の変換方法を決められずエラーになる。
2. 拡張子が .ts: JSX を書くファイルは .tsx にする必要がある。.ts のままだと山括弧が型アサーションと解釈される。
3. エディタとの不一致: VS Code が使う TypeScript とプロジェクトの tsconfig.json がずれていると、設定を直しても警告が残ることがある。

解決策

1. tsconfig に jsx を設定する

React 17 以降の自動ランタイムなら react-jsx を指定する。

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

Babel など別のツールで JSX を変換する構成なら preserve を選ぶ。
各値の違いは公式の TSConfig jsx オプション（新しいタブで開く）↗に一覧がある。

2. 拡張子を .tsx にする

Button.ts  ->  Button.tsx

3. エディタの TypeScript を再読み込みする

VS Code ならコマンドパレットで「TypeScript: Restart TS Server」を実行し、設定を読み直す。