Docker+Laravel+React+TypeScriptの開発環境

Docker＋Laravel＋Reactまではこちらを参照

なので、ReactにTypeScriptを適応させます。

Reactは、テンプレートを用意しており、そのテンプレートは、Javascript+XMLにより
記述される事となっています。なので、Javascriptの上位互換を謳っているTypeScriptは
Javascriptと入れ替えが可能となります。これをテンプレートエンジンViteで管理します。

図にすると

ファイル拡張子をTypScriptへ変更

ViteもJavascriptなので、拡張子をTypeScriptに対応させます。

vite.config.js→vite.config.ts

また、XMLを処理する場合はtsxの拡張子を使う事になります。
なので、プログラムを記述するファイルは、

app.jsx→app.tsx

に拡張子を変更します。
.ts拡張子：純粋なTypeScriptファイルで、JSX要素をサポートしない。

vite.config.tsの記述も変更

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.tsx'],
            refresh: true,
        }),
        react(),
    ],
});

welcom.blade.phpの読み込みも変更

@viteReactRefresh @vite(['resources/js/app.tsx'])

拡張子の変更が済んだら、VSCodeのRemote Developmentを起動し、Dockerコンテナー内の
Laravelプロジェクトに移動します。

モジュールの追加

npmコマンドにより、TypeScriptをReactに導入します。

package.jsonに下記を記述し、（Verは逐次更新してください）

 "devDependencies": {
        "@types/react": "^18.2.37",
        "@types/react-dom": "^18.2.15",
        "@types/react-router-dom": "^5.3.3",
        "@vitejs/plugin-react": "^4.1.1",
 }

npmで更新

npm install -D typescript

Viteを起動して、

npm run dev

localhost:8000にアクセスうれば、welcom.blade.phpの内容が確認できます。