我正在構建一個帶有嵌入式 Google 地圖的 React 應用程式。
我有一個自定義選單元素，我想在單擊后顯示在地圖上。Google 的檔案指示我“實作”（盡管我認為在 Typescript 術語中，它們的意思是擴展）google.maps.OverlayView該類以便在地圖上呈現元素。
當我定義class ContextMenu extends google.maps.OverlayView類inline 時，代碼編譯得很好，我的元素在單擊時顯示。我想使用 Typescript 在一個單獨的檔案中定義這個類。
但是，當我移動ContextMenu到一個單獨的檔案時，React 出錯了ReferenceError: google is not defined。
知道如何“匯入命名空間”以便ContextMenu.ts知道在哪里google？似乎我在這里遺漏了一些關于 Typescript 的基本知識，但是我能找到的他們的檔案都沒有討論過使用外部命名空間創建類的做法。
或者extends在這里這樣做是錯誤的？我是否應該只遵循 Google 的說明，即使在存在的Typescript中是為了避免弄亂原型？
通過設定疊加層的原型從此類繼承：
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 {
// ...
}
uj5u.com熱心網友回復：
無法直接擴展 google.maps.* 類，因為它實際上不可用（這可能取決于 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);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373495.html