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

投稿日: 2019年9月21日
最終更新日:

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

YouTubeも見てね♪

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2025/01/05 12:56:12時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

Anker PowerCor

created by Rinker
Anker
¥3,990 (2025/01/05 12:09:11時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー!

【最新機種】GoPro hero11 Black

created by Rinker
¥61,300 (2025/01/05 20:59:47時点 楽天市場調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

created by Rinker
THE NORTH FACE(ザノースフェイス)
¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,000 (2025/01/05 12:33:39時点 Amazon調べ-詳細)

翼を授けよう!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥10,429 (2025/01/05 12:09:13時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

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を使う場合はほぼ必須の設定となっているので、お困りの際はぜひ試してみて下さい。

CATEGORIES & TAGS

IT