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
必要な依存関係の追加やコードの修正は勝手にやってくれるので、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
むむ。
しかしご安心を。
こちらのエラーは簡単に一瞬で解決することが出来るので解決方法をご紹介しようと思います。
手順
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"
]
}
たったこれだけ。
確認
では、再度起動してみましょう
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
そもそも無いしね！！！笑
終わりに
以上のように、たった一行加えるだけでTypeScriptのエラーを解消する事が出来ました。
TypeScriptでVuetifyを使う場合はほぼ必須の設定となっているので、お困りの際はぜひ試してみて下さい。