素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【TypeScript】Vuetifyを入れた際の「implicitly has an ‘any’ type.」のビルドエラーの原因と解決方法【Vue-cli3】

投稿日:

スポンサーリンク

336×280




VuetifyでTypeScriptエラー

Vue-cli3で簡単に導入可能

Vue-cli3を利用すると、簡単にプロジェクトにVuetifyを導入することが可能になります。

必要な依存関係の追加やコードの修正は勝手にやってくれるので、Vue-cliはマジで神だと思います。

ちなみに、VuetifyとはVue.js用のデザインフレームワークです。


活発なコミュニティ
つまづいてしまったらすぐに助けが必要です。VuetifyはDiscord上で大きなコミュニティによるサポートを用意しています。

セマンティックコンポーネント
80種類以上のコンポーネントが用意されており、どんなアプリケーションにも対応することができます。Vue Material Design Component Framework — Vuetify.js

TypeScriptを導入しているとコンパイルエラーが発生

しかし、追加して起動するとアプリは立ち上がるのですが、TypeScriptビルドエラーが発生してしまいます。

むむ。

しかしご安心を。

こちらのエラーは簡単に一瞬で解決することが出来るので解決方法をご紹介しようと思います。

手順

tsconfig.jsonに一行追加

対処方法は、tsconfig.jsoncompilerOptions.typesvuetify一行追加するだけで良いです。

たったこれだけ。

確認

では、再度起動してみましょう

無事にTypeScriptのビルドエラーが無くなりましたね♪

npm install @types/vuetifyは不要

エラーログを見ると、npm install @types/vuetifyを行って型定義ファイルを入れろ!とありますが、実際にはインストールする必要は無いので覚えておきましょう♪

そもそも無いしね!!!笑

本日のオススメ商品

終わりに

以上のように、たった一行加えるだけでTypeScriptのエラーを解消する事が出来ました。

TypeScriptでVuetifyを使う場合はほぼ必須の設定となっているので、お困りの際はぜひ試してみて下さい。

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist