TypeScriptでvuetifyとvue2-google-mapsを使用する

個人開発したアプリの宣伝
目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。
Todo with Location

Todo with Location

  • Yoshiko Ichikawa
  • Productivity
  • Free

スポンサードリンク

vuetifyを使用する

vuetifyはvue create後にaddするので、typescript.jsonにcompile typeの記述が必要なようです。

typescript.json、compilerOptions.typeにvuetifyを追記

"types": [
  "webpack-env",
  "mocha",
  "chai",
  "vuetify"
],


vue2-google-mapsを使用する

build時に以下のようなエラーが出て、installしたライブラリを読み込むことが出来ませんでした。

ERROR in /projectpath/src/main.ts(6,32):
6:32 Could not find a declaration file for module 'vue2-google-maps'. '/projectpath/node_modules/vue2-google-maps/dist/main.js' implicitly has an 'any' type.
  Try `npm install @types/vue2-google-maps` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue2-google-maps';`
  >  import * as VueGoogleMaps from 'vue2-google-maps';

Try npm install @types/vue2-google-mapsを試しても、dose not existsで解決せず。


このissueを見て解決しました。

Compatibility with typescript · Issue #560 · xkjyeah/vue-google-maps · GitHub

シンプルにsrc/@types/vue2-google-maps.d.tsというファイルを作成して、

declare module "vue2-google-maps" {
    import { PluginFunction } from "vue";
    export const install: PluginFunction<{}>;

    // put here all source from
    // https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/googlemaps/index.d.ts
}

を記述すれば良いようです。