Laravel-mixにTypeScriptを導入する

LaravelとVueの組み合わせの環境は、

システム開発で使うことがあるのだが、

この環境構成に加えて、

「TypeScript」

についても導入を行いたいと思って、

実際に試した時のメモ。

前提：Laravel8+Vue3の環境構築

まず、前提として、

Laravel8+Vue3の環境構築を行った。

Laravelの画面表示は、

こちらのバージョン表示が、

Laravel8での導入を行った。

併せて、

Vue3についても導入を行い、

{
    "dependencies": {
        "vue": "^3.2.31"
    }
}

パッケージ管理上で、

上記のようにバージョンが３系で動くようになった。

ここまでの導入は、

以下の記事を参考にしてもらいたい。

Laravel8とVue3の組み合わせの環境構築

TypeScriptの導入の参考記事

上記までの環境構築を前提として、

Laravelの環境に、

TypeScriptの導入を進めてみる。

参考にした記事をメモしておく

TypeScript with Laravel

TypeScriptの導入設定メモ

実際に試したことをメモしていく。

TypeScriptのloaderのインストール

npm install ts-loader typescript --save-dev

実行すると

$ npm install ts-loader typescript --save-dev
 :
+ ts-loader@9.2.8
+ typescript@4.6.2
added 2 packages from 3 contributors and audited 781 packages in 8.385s

という感じで、

TypeScriptと付随するloaderがインストールされた。

次にTypeScript用の設定ファイルを作成する

tsconfig.json

というファイルを作成。

中身を記述する

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2020",
    "moduleResolution": "node",
    "baseUrl": "./",
    "strict": true,                 
    "skipLibCheck": true,          
    "noImplicitAny": false         
  },
  "include": ["resources/js/**/*"]  
}

次に

webpackの設定ファイルを変更する

webpack.mix.js

設定の中身は、

「js」を「ts」に以下のように変更する

const mix = require('laravel-mix');

mix.ts('resources/js/app.ts', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

ここまでで、

コンパイルを確認してみると

./resources/js/app.ts 2:16-27
[tsl] ERROR in /var/www/html/jimusagyo/resources/js/app.ts(2,17)
      TS2307: Cannot find module '@/App.vue' or its corresponding type declarations.

このようなエラーが出たので、

以下の対応を実施。

resources/js/types.d.js

または、以下（上記でうまくいったが、別環境でうまくいかず、以下。理由不明）

resources/js/shim-vue.d.ts

declare module '*.vue' {
  import { Component } from 'vue'
  const component: Component
  export default component
}

こちらを行うことで、

コンパイルがうまくいった。

$ npm run watch

$ npm run watch
  :
  :
✔ Compiled Successfully in 5668ms
┌───────────────────────────────────┬──────────┐
│                              File │ Size     │
├───────────────────────────────────┼──────────┤
│                        /js/app.js │ 1.32 MiB │
│                       css/app.css │ 1 bytes  │
└───────────────────────────────────┴──────────┘
| ✔ Mix: Compiled successfully in 5.85s
| webpack compiled successfully