Vite環境でのTypeScriptはトランスパイルのみを行い型チェックは行いません。
基本的にVSCodeの拡張機能を使ってエディタ側で型チェックをしてね！という方針のようです。
それでも型チェックをしたい場合は以下の公式ドキュメントの文面のように他のライブラリやtsc –noEmitを実行して確認するとのことです。
TypeScript
- プロダクションビルドの場合は、Vite のビルドコマンドに加えて、
tsc --noEmitを実行できます。- 開発中、IDE のヒント以上が必要な場合は、別プロセスで
tsc --noEmit --watchを実行するか、型エラーをブラウザに直接報告させたい場合は vite-plugin-checker を使用することをおすすめします。
今回は以下のようなBackend Integration環境でvite-plugin-checkerを導入する方法を紹介します。
- Laravel9
- Vue.js3
- Vite
- TypeScript
Contents
vite-plugin-checkerをインストール
# yarn
yarn add -D vite-plugin-checker
# npm
npm i -D vite-plugin-checkerTypeScriptとvue-tscをインストールします
# yarn
yarn add -D typescript
# npm
npm install -D typescript# yarn
yarn add -D vue-tsc
# npm
npm i vue-tsc -Dこの時vue-tscとtypescriptはピア依存関係としてインストールされている必要があります。
pnpm add vue-tsc@latest typescript -Dvite.config.tsを編集
vite.config.tsに以下のようにcheckerオプションを追記します。
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import checker from 'vite-plugin-checker'
export default defineConfig({
plugins: [
laravel({
input: ['resources/sass/app.scss', 'resources/js/app.ts'],
refresh: true
}),
vue(),
checker({
vueTsc: true,
// オーバーレイを表示しない場合はfalse
overlay: true,
// esLintのチェックをしない場合は以下は消しても構いません
eslint: {
lintCommand: 'eslint "resources/js/**/*.{js,ts,vue}"',
dev: {
// warningも表示したい場合は以下にwarningを追加
logLevel: ['error']
}
}
})
],
resolve: {
alias: {
'@': '/resources/js'
}
},
server: {
host: true
}
})
上記を記入したら以下コマンドを叩くとコマンドライン上にエラーが表示されるようになります。
# yarn
yarn dev
# npm
npm run devビルド時に型チェックをする
vite-plugin-checkerではnpm run buildコマンドを叩いた時にもコマンドライン上にエラーが表示されますがビルド自体は成功するようになっています。
なのでnpm run build時にエラーがある際、ビルドを中断したい場合は以下のようにpackage.jsonを編集する必要があります。
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
},bladeファイルにvueを描画する運用だとオーバーレイが表示されない…
通常vite-plugin-checkerを設定するとコマンドラインとブラウザ上でもエラーを
確認することができます。
しかし今回のようなLaravel x Vueの開発でbladeファイルにvueを描画している場合だと
上記の設定では動いてくれませんでした。
実際issueにも挙がっていました…
https://github.com/fi3ework/vite-plugin-checker/issues/168
issueを読み進めると以下を埋め込むとオーバーレイが表示されると書かれています
<head>
// XXX
</head>
@vite( ['resources/js/app.ts'])
<script type="module">
import { inject } from "http://localhost:3000/@vite-plugin-checker-runtime";
inject({
overlayConfig: {},
base: "/",
});
</script>ということでapp.blade.phpなどの@vite( [‘resources/js/app.ts’])を読み込ませている
bladeファイルに上記のscriptを埋め込んでみます。
すると今度は以下のエラーが出てしまいます。。。
Too few arguments to function Illuminate\Foundation\Vite::__invoke(),解決策
resources/ts/app.tsファイルなどのvueインスタンスファイルに
下記を読み込ませるようにするとエラーが出ずに
オーバーレイが表示されるようになりました!
またビルド時にESLintとTypeScriptのエラーが出たので以下記述のみ例外としました…
また開発環境でのみエラー表示を出したいので環境変数を使って開発環境でのみ動作するように設定しました。
ただこれだと今度はViteのホットリロードが効かなくなってしまうのでもっと良い方法があるかもしれません…
// 開発環境でのみ型エラーのオーバーレイを表示する
if (import.meta.env.VITE_ENV !== 'production') {
let inject
/* eslint-disable */
// @ts-ignore
import('/@vite-plugin-checker-runtime').then(module => {
inject = module.inject
inject({ overlayConfig: {}, base: '/' })
})
}
export {};
まとめ
今回はLaravel x Vue x Vite環境にvite-plugin-checkerを導入する方法を紹介しました。
VIteはビルドが爆速で快適ですがTypeScriptの型チェックを行わないので少し歯痒いところもありました。ですがvite-plugin-checkerを導入するとその不安もなくなりめちゃくちゃ開発が快適になりました！
ViteとTypeScriptを採用する際は導入を検討するのもいいかもしれません！
関連記事
