はじめに
すでにLaravelプロジェクトがあることを前提とします。
Laravelプロジェクトを作成する場合は以下を参照ください。
また、本記事こ以下を参考に作成致しました。（正直これらを見れば一通りできますｗ）
なお、本記事はここからはプロジェクトルートディレクトリでの操作になります。
環境
| ライブラリ | バージョン |
|---|---|
| PHP | 7.3.10 |
| Laravel | 6.11.0 |
| Bootstrap | 4.1.0 |
| jQuery | 3.2 |
TypeScriptをインストール
僕はnpmを使いました。
$ npm install ts-loader typescript --save-dev
@types/jQueryのインストール
Laravel作成時に、jQueryがインストールされていることが前提となります。
@types/jQueryは、TypeSctiptでjQueryを利用する際のモジュールになります。
$ npm install @types/jQuery --save-dev
@types/bootstrapのインストール
Laravelプロジェクト作成時に、BootStrap4がインストールされていることが前提となります。
@types/bootstrapは、TypeSc ripでBootstrapを利用する際のモジュールになります。
$npm install @types/bootstrap --save-dev
設定ファイルtsconfig.json作成
以下のようなファイルを作成します。
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es2015",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"target": "es6",
"lib": [
"es2016",
"dom"
]
},
"include": [
"resources/ts/**/*" // TypeScriptのソース配置場所
]
}
laravel-mixの導入
$ npm install --sae-dev laravel-mix browser-sync-webpack-plugin
package.jsonの編集
Laravelには標準でnpmの設定ファイル（packege.json）が同梱されていますが、今回はLaravel外での作業となるので手動で作成します。
package.jsonファイルのscriptsの中を以下のように記述します。
{
"scripts": {
"dev": "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
"prod": "NODE_ENV=production webpack --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"browser-sync-webpack-plugin": "^2.0.1"
},
"dependencies": {
"laravel-mix": "^2.1.11"
}
}
編集した後↓を打ちます
$ npm run dev
で動けばOKです。
webpack.mix.jsファイルの作成
Laravel Mixの設定ファイルはwebpack.mix.jsというファイルになります。
laravel-mixではjsを読み込むようになっているので、ts(TypeScript）を読み込むように変更します。
以下の通りにします。
const mix = require('laravel-mix');
mix.ts('resources/ts/app.ts', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
app.ts作成
laravel-mixの設定では、エントリーポイントをapp.jsからapp.tsに変更しました。
app.tsの初期実装は以下のようにしています。
import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
$(document).ready(() => {
// Bootstrapで利用するjsの読み込み
bootstrap;
});
jqueryとbootstrapをインストールされていなければ「モジュールが見つかりません」みたいなエラー（細かくは覚えてません・・・＞＜）が出るのでその際はもう一度インストールしてみると良きです。
これでTypeScriptの導入は完了です。
typeScriptでHello World
以下のページを参考にしました。
resources/tsにTypeScriptファイル（拡張子→.ts）を作成します。（名前は自由です。センスにお任せします。）
そして以下のように実装します。
class HelloWorld {
constructor(public displayText: string) { }
greet() {
return this.displayText;
}
}
var helloWorld = new HelloWorld("HelloWorld");
document.body.innerHTML = helloWorld.greet();
作成したらコンパイルしましょう（これがTypeScriptの醍醐味です）
$ tsc resources/ts/HelloWorld.ts（作成したファイル名）
コンパイルが完了するとjavascriptに書き換えられたファイルが以下のように同じディレクトリに出現します。
var HelloWorld = /** @class */ (function () {
function HelloWorld(displayText) {
this.displayText = displayText;
}
HelloWorld.prototype.greet = function () {
return this.displayText;
};
return HelloWorld;
}());
var helloWorld = new HelloWorld("HelloWorld");
document.body.innerHTML = helloWorld.greet();
この際HelloWorld.jsをpublic/jsディレクトリに移します。（この辺は個人のやり方にお任せします！）
HTMLを作成し、javascriptを作動させる。
resources/viewに以下のviewファイルを作成します。（こちらもファイル名は自由です！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="{{ asset('/js/HelloWorld.js') }}"></script> // public配下を見に行ってます。
</body>
</html>
その後ルーティングをいじります。
routes/web.phpに以下を追加します。
HelloWorld部分はご自由に・・・！
Route::get('HelloWorld', function () {
return view('HelloWorld');
});
$ php artisan serve
でサーバーを起動して指定したルート（ここではHelloWorld）にアクセスするとjavascriptの処理内容が出力されるようになります！
以上でTypeScriptの導入と動作確認が完了です！！( ˆoˆ )/
おわりに
この手順であればTypeScriptを動かせるでしょう！
何かあればご指摘いただけると幸いです＞＜！
それではまた・・・！