ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
スポンサーリンク
目次
VuetifyでTypeScriptエラー
Vue-cli3で簡単に導入可能
Vue-cli3を利用すると、簡単にプロジェクトにVuetifyを導入することが可能になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
📦 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のビルドエラーが発生してしまいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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を一行追加するだけで良いです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
{ "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" ] } |
たったこれだけ。
確認
では、再度起動してみましょう
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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を行って型定義ファイルを入れろ！とありますが、実際にはインストールする必要は無いので覚えておきましょう♪
|
1 2 3 4 5 6 7 8 9 10 11 |
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を使う場合はほぼ必須の設定となっているので、お困りの際はぜひ試してみて下さい。
Travenist
Otakenist
