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

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

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

YouTubeも見てね♪

Anker PowerCor

created by Rinker
Anker
¥4,990 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

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

【最新機種】GoPro hero11 Black

created by Rinker
GoPro(ゴープロ)
¥62,000 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

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

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

created by Rinker
Red Bull(レッドブル)
¥4,000 (2024/04/03 21:42:12時点 Amazon調べ-詳細)

翼を授けよう!

モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker
モンスター
¥4,748 (2024/04/03 21:33:15時点 Amazon調べ-詳細)

脳を活性化させるにはこれ!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

created by Rinker
MOFT
¥2,880 (2024/04/03 21:42:18時点 Amazon調べ-詳細)

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