投稿日： 2019年9月21日
最終更新日： 2023年3月28日

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

YouTubeも見てね♪

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

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

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

ペヤングソースやきそば 120g×18個

created by Rinker

ペヤング

¥3,280 (2025/01/05 12:33:38時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし！

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

created by Rinker

Red Bull(レッドブル)

¥4,000 (2025/01/05 12:33:39時点 Amazon調べ-詳細)

翼を授けよう！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,940 (2025/01/05 12:41:47時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

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

created by Rinker

Bauhutte(バウヒュッテ)

¥15,855 (2025/01/05 12:09:12時点 Amazon調べ-詳細)

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

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

created by Rinker

BANDAI SPIRITS(バンダイスピリッツ)

¥10,429 (2025/01/05 12:09:13時点 Amazon調べ-詳細)

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

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

created by Rinker

MOFT

Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！

1 VuetifyでTypeScriptエラー
- 1.1 Vue-cli3で簡単に導入可能
- 1.2 TypeScriptを導入しているとコンパイルエラーが発生
2 手順
- 2.1 tsconfig.jsonに一行追加
  - 2.1.1 確認
- 2.2 npm install @types/vuetifyは不要
3 終わりに

VuetifyでTypeScriptエラー

Vue-cli3で簡単に導入可能

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

📦  Installing vue-cli-plugin-vuetify...

yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-vuetify@0.6.3
info All dependencies
└─ vue-cli-plugin-vuetify@0.6.3
✨  Done in 2.79s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

yarn install v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 4.77s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify

📦 Installing vue-cli-plugin-vuetify...

yarn add v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

success Saved 1 new dependency.

info Direct dependencies

└─ vue-cli-plugin-vuetify@0.6.3

info All dependencies

└─ vue-cli-plugin-vuetify@0.6.3

✨ Done in 2.79s.

✔ Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀 Invoking generator for vue-cli-plugin-vuetify...

📦 Installing additional dependencies...

yarn install v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved lockfile.

✨ Done in 4.77s.

⚓ Running completion hooks...

✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify

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

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

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

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

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

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

ERROR in /Users/blogenist/sample-app/src/main.ts
11:3 No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object, object, object, Record<never, any>>', gave the following error.
    Argument of type '{ store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<never, any>>', gave the following error.
    Argument of type '{ store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined): CombinedVueInstance<...>', gave the following error.
    Argument of type '{ store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
      Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
     9 | new Vue({
    10 |   store,
  > 11 |   vuetify,
       |   ^
    12 |   render: (h) => h(App)
    13 | }).$mount('#app');
    14 |
ERROR in /Users/blogenist/sample-app/src/plugins/vuetify.ts
2:21 Could not find a declaration file for module 'vuetify/lib'. '/Users/blogenist/sample-app/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuetify/lib';`
    1 | import Vue from 'vue';
  > 2 | import Vuetify from 'vuetify/lib';
      |                     ^
    3 |
    4 | Vue.use(Vuetify);
    5 |
Version: typescript 3.6.3, tslint 5.20.0
Time: 1871ms

ERROR in /Users/blogenist/sample-app/src/main.ts

11:3 No overload matches this call.

Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object, object, object, Record<never, any>>', gave the following error.

Argument of type '{ store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.

Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'.

Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<never, any>>', gave the following error.

Argument of type '{ store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.

Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'.

Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> | undefined): CombinedVueInstance<...>', gave the following error.

Argument of type '{ store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.

Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.

9 | new Vue({

10 | store,

> 11 | vuetify,

| ^

12 | render: (h) => h(App)

13 | }).$mount('#app');

14 |

ERROR in /Users/blogenist/sample-app/src/plugins/vuetify.ts

2:21 Could not find a declaration file for module 'vuetify/lib'. '/Users/blogenist/sample-app/node_modules/vuetify/lib/index.js' implicitly has an 'any' type.

Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuetify/lib';`

1 | import Vue from 'vue';

> 2 | import Vuetify from 'vuetify/lib';

| ^

3 |

4 | Vue.use(Vuetify);

5 |

Version: typescript 3.6.3, tslint 5.20.0

Time: 1871ms

むむ。

しかしご安心を。

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

手順

tsconfig.jsonに一行追加

対処方法は、tsconfig.jsonのcompilerOptions.typesにvuetifyを一行追加するだけで良いです。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "vuetify" // 追加
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

{

"compilerOptions": {

"target": "esnext",

"module": "esnext",

"strict": true,

"jsx": "preserve",

"importHelpers": true,

"moduleResolution": "node",

"experimentalDecorators": true,

"esModuleInterop": true,

"allowSyntheticDefaultImports": true,

"sourceMap": true,

"baseUrl": ".",

"types": [

"webpack-env",

"vuetify" // 追加

"paths": {

"@/*": [

"src/*"

]

"lib": [

"esnext",

"dom",

"dom.iterable",

"scripthost"

]

"include": [

"src/**/*.ts",

"src/**/*.tsx",

"src/**/*.vue",

"tests/**/*.ts",

"tests/**/*.tsx"

"exclude": [

"node_modules"

]

}

たったこれだけ。

確認

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

yarn run v1.17.3
warning ../package.json: No license field
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
10% building 2/2 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/blogenist/sample-app/public
ℹ ｢wds｣: 404s will fallback to /index.html
98% after emitting CopyPlugin

 DONE  Compiled successfully in 8989ms                                                                                                                                                                                                15:57:29

No type errors found
No lint errors found
Version: typescript 3.6.3, tslint 5.20.0
Time: 1945ms

  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run yarn build.

yarn run v1.17.3

warning ../package.json: No license field

$ vue-cli-service serve

INFO Starting development server...

Starting type checking and linting service...

Using 1 worker with 2048MB memory limit

10% building 2/2 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8080/

ℹ ｢wds｣: webpack output is served from /

ℹ ｢wds｣: Content not from webpack is served from /Users/blogenist/sample-app/public

ℹ ｢wds｣: 404s will fallback to /index.html

98% after emitting CopyPlugin

DONE Compiled successfully in 8989ms 15:57:29

No type errors found

No lint errors found

Version: typescript 3.6.3, tslint 5.20.0

Time: 1945ms

App running at:

- Local: http://localhost:8080/

- Network: unavailable

Note that the development build is not optimized.

To create a production build, run yarn build.

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

npm install @types/vuetifyは不要

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

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvuetify - Not found
npm ERR! 404
npm ERR! 404  '@types/vuetify@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/blogenist/.npm/_logs/2019-09-19T11_24_38_698Z-debug.log