LaravelにTypeScriptの導入

LaravelでTypeScriptを利用できるようにしてみました。

環境

* Laravel:5.7
* TypeScript:3.0.3
* ts-loader:3
※ laravel-mixで使用するwebpackのバージョンが古いため、ts-loaderは3にする必要がありました。

導入

プロジェクトの新規作成

パッケージのインストール

tsconfig.jsonの作成

プロジェクトの直下にtsconfig.jsonを作成します。
※環境設定は好みに合わせて変更してください。

TypeScriptを作成

/resources/ts/helloworld.tsを作成します。
今回はハローワールドします。

webpack.mix.jsを編集

Laravel MixでTypeScriptを変換できるようにしてあげます。

以下の内容を追加してください。

bladeファイルの編集

welcome.blade.phpに以下のコードを追加します。

動作確認

サーバの起動

consoleの確認

開発者ツールを開き、コンソールを確認します。

consoleの画面

まとめ

以上、LaravelでTypeScriptを導入する方法でした。

 

システム開発のご相談はこちらからお気軽にお問合せください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です