🎃

【Vue3】TypeScriptでwindow.googleと記述した際のエラーを解消する

に公開
TypeScript
Vue.js
Google Map
tech

Vue、TypeScriptを利用してGoogleMapを表示する際に、window.googleと記述した際に以下のエラーが発生したときの対処法

プロパティ 'google' は型 'Window & typeof globalThis' に存在しません。ts(2339)

結論

<template>
  省略
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface GMapWindow extends Window {
  google: any;
}
declare const window: GMapWindow;

export default defineComponent({
  setup() {
    new window.google.maps.Map(GoogleMapを表示するHTMLのref, {
    ・・・

解説

TypeScriptで次のように記述すると、windowにgoogleというプロパティはないと怒られる。

window.google.maps

そのため、windowはgoogleというプロパティを持っていることを宣言することによって、上記エラーを回避する。

1. Windowを継承したインターフェースを定義する

もともと定義されているinterface Windowを継承して新たなinterfaceを作成し、googleというプロパティを持っていることを宣言する。

<template>
  省略
</template>

<script lang="ts">
import { defineComponent } from 'vue';

+ interface GMapWindow extends Window {
+   google: any;
+ }

export default defineComponent({
  setup() {
    new window.google.maps.Map(GoogleMapを表示するHTMLのref, {
    ・・・

2. アンビエント宣言でWindowの型定義をする

declareキーワードでwindowの型を上書きする。
以下のようにすることで、windowの型は先ほど定義したGMapWindowとして認識される。

<template>
  省略
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface GMapWindow extends Window {
  google: any;
}
+ declare const window: GMapWindow;

export default defineComponent({
  setup() {
    new window.google.maps.Map(GoogleMapを表示するHTMLのref, {
    ・・・

declareについて詳しく知りたい方はこちら

これでwindow.googleと記述してもエラーが表示されなくなります。

Discussion