LaravelでTypeScriptを使おう！

はじめに

Laravel(Sail)勉強中にTypeScriptもついでに学びたい！と思い立ち環境構築をしました🙌
ですので、はじめてのかた向けの記事になります！
では、やっていきます💁

npmのインストール

まず、こちらのコマンドでnpm(NodePackageManager)をインストールします！

npm install

vite.config.jsの設定

TypeScriptの使用にはLaravelVite(フロントエンドのビルドツール)が必要になります。
/プロジェクトルート/vite.config.jsが設定ファイルになり、こちらを設定していきます🙌

import { defineConfig } from "vite";
//【１】Vite の設定ファイルで【３】のdefineConfig 関数を使用可能にします
import laravel from "laravel-vite-plugin";
//【２】Laravel 用の公式 Vite プラグインをインポートする文
export default defineConfig({
//【３】Viteプロジェクトの設定を定義
    plugins: [
//【４】 使用するViteプラグインの配列
        server: {
//【５】開発サーバーの設定
                hmr: {
                    host: "localhost",
                },
            },
//【６】tsのエントリーポイント
            input: [
                "resources/js/app.ts",
            ],
            refresh: true,
//【７】ファイルが変更されたときにブラウザを自動的にリフレッシュ
        }),
    ],
});

ビルドコマンドの実行

sail npm run build

Blade ディレクティブの設定

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

おわりに

以上となります😊
お疲れさまでした～～🍵