类型记录ReferenceError: google未定义，但仅在独立文件中定义

Question

我正在用嵌入的Google构建一个React应用程序。

我有一个自定义菜单元素，我想在地图上显示点击后。谷歌的医生告诉我 to 'implement‘(虽然我认为在类型转换方面，它们是指扩展) google.maps.OverlayView类，以便在映射上呈现元素。

当我定义class ContextMenu extends google.maps.OverlayView类内联时，代码编译得很好，我的元素在单击时显示出来。我想使用类型记录在一个单独的文件中定义这个类。

但是，当我将ContextMenu移动到一个单独的文件时，使用ReferenceError: google is not defined响应错误。

您知道如何“导入名称空间”以便ContextMenu.ts知道google在哪里吗？在这里，我似乎遗漏了一些关于类型记录的基本内容，但我找到的文档中没有一个讨论过使用外部名称空间创建类的实践。

还是extends在这里做错了这件事？我是否应该遵循Google的指示，即使是在存在的类型记录中，以避免干扰原型

通过设置覆盖的原型：MyOverlay.prototype = new google.maps.OverlayView()；从该类继承。

工作代码：

// App.tsx
import React from 'react'
import { Wrapper } from '@googlemaps/react-wrapper'
// cannot define ContextMenu here

const App: React.VFC = () => {
  // cannot define ContextMenu here
  const onClick = (e: google.maps.MapMouseEvent) => {
    // CAN define ContextMenu here
    class ContextMenu extends google.maps.OverlayView {
      private origin_: google.maps.LatLng
      constructor(origin: google.maps.LatLng) {
        super()

        this.origin_ = origin
      }
    }

    const menu =  new ContextMenu(e.latLng)
  }

  return (
    <Wrapper ...>
    // Map goes here
    </Wrapper>
  )
}

破译代码：

// App.tsx as above, without ContextMenu defined.

// ContextMenu.ts
class ContextMenu extends google.maps.OverlayView {
  // ...
}

Answer 1

不可能直接扩展google.map.*类，因为它实际上是不可用的(这可能取决于tsconfig目标，但我还没有测试)。您可以在TypeScript中使用以下模式来延迟。

export interface OverlayViewSafe extends google.maps.OverlayView {}

/**
 * Extends an object's prototype by another's.
 *
 * @param type1 The Type to be extended.
 * @param type2 The Type to extend with.
 * @ignore
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function extend(type1: any, type2: any): void {
  // eslint-disable-next-line prefer-const
  for (let property in type2.prototype) {
    type1.prototype[property] = type2.prototype[property];
  }
}

/**
 * @ignore
 */
export class OverlayViewSafe {
  constructor() {
    // We use the extend function for google.maps.OverlayView
    // because it might not always be available when the code is defined.
    extend(OverlayViewSafe, google.maps.OverlayView);
  }
}