はじめに
React + TypeScriptの環境構築を行って、.tsx ファイルを開いたところ、コードは間違っていないのにVSCode上で大量のエラー（赤い波線）が出続ける現象に遭遇しました。
問題
拡張子が .tsx であるにもかかわらず、JSX（HTMLタグのような記述）の部分がすべて赤字の頓珍漢なエラーが出てきました。
◾️発生していたエラーメッセージ一覧
'>' が必要です。
型が必要です。
名前 'div' が見つかりません。
未終了の正規表現リテラルです。
';' が必要です。
'erasableSyntaxOnly' が有効な場合、この構文は使用できません。
◾️エラーが出た実際のtsxファイル画面
◾️画面は正常に表示できる
解決方法
VS Codeの「言語モード」が、JSXをサポートしていない通常の 「TypeScript」 に設定されていたことが原因でした。（エディタが<section>などのタグを「比較演算子の < 」や「正規表現の始まり」だと誤認してしまい、構文エラーを連発していました）
VS Codeが認識している「言語モード」を正しく指定し直し、ウィンドウをリロードすることで解決しました。
1.言語モードの変更
-
問題の起きているファイル（App.tsx など）を開いた状態で、VS Code画面の右下にあるステータスバーの言語名（おそらく TypeScript と表示されている部分）をクリックします。
-
出てきた入力欄に 「TypeScript JSX」（または 「TypeScript React」）と入力して選択してください。
2.VS Codeの再読み込み
- 変更を確実に反映しキャッシュをクリアするため、コマンドパレット（
Mac: Cmd + Shift + P / Windows: Ctrl + Shift + P）を開きます。
Developer: Reload Window（開発者: ウィンドウの再読み込み）と入力して実行します。
おわりに
「tsconfig.json のjsx 設定がおかしいのでは？」や「TypeScriptのバージョンのせいでは？」と設定を疑って沼にハマってしまいました。実際は、VsCodeエディタの「ファイルの言語モードの認識ズレ」という、盲点が原因でした。同じ現象に悩んでいる方の解決の糸口になれば幸いです。
参考