在React中使用Mapbox映射变量的正确类型是什么？

Question

[看mapbox documentation之后，我写了这个组件

import React from "react";
import mapboxgl from "mapbox-gl";
import "./Map.css";

mapboxgl.accessToken = "...";

type Props = {
  longitude: number;
  latitude: number;
};

class Map extends React.Component<Props> {
  private mapContainer: any;
  private map: any;

  componentDidMount(): void {
    this.map = new mapboxgl.Map({
      container: this.mapContainer,
      center: [this.props.longitude, this.props.latitude],
      style: "....",
      zoom: 13
    });
  }
  render(): JSX.Element {
    return (
      <div
        ref={(el): void => {
          this.mapContainer = el;
        }}
        className="mapContainer"
      />
    );
  }
}

export default Map;

此代码正确运行，但是，在我的真实项目中，我们正在使用TypeScript。我不想将any用于mapContainer和map。

我已经将"@types/mapbox-gl": "^1.7.0",导入到我的项目中，但是我无法弄清楚在这里必须使用哪种类型。

直到现在我的尝试：

• private map:mapboxgl.Map。这似乎是正确的，但随后它便感到满意，因为它没有在构造函数上初始化。根据mapbox文档，必须在componentDidMount上对其进行初始化。我可以用mapboxgl.Map | null键入变量。但是然后我必须定期检查不为空，以删除一些烦人的警告。
• private mapContainer = React.userRef<HtmlElement>(null);。但是，当我尝试初始化地图时，它说类型'RefObject<HTMLElement>' is not assignable to type 'string | HTMLElement'.

有什么想法吗？

Answer 1

根据您的代码，以下工作。首先，您需要导入从Map导出的mapbox-gl类型：

import mapbox-gl, { Map } from "mapbox-gl";

稍后可以用作组件内部地图的类型：

private map: Map | undefined; // | undefined is needed here otherwise Typescript will complain about a missing initialiser inside the constructor.

现在是棘手的部分，容器定义为：

container: string | HTMLElement

在MapboxOptions类型定义内。因此，我们必须解决该问题：

class SampleMap extends React.Component<Props> {
  private mapContainer: HTMLElement | null | undefined = undefined;
  private map: Map | undefined;

  componentDidMount(): void {
    this.map = new mapboxgl.Map({
      container:
        this.mapContainer === undefined || this.mapContainer === null
          ? "" // or pass in some other HTMLElement which is definitely defined or similar ...
          : this.mapContainer,
      ... // abbreviated
    });
  }
  render(): JSX.Element {
    ... // abbreviated
  }
}

[检查是否定义了mapContainer，并且不为null，然后传递mapContainer，否则传递string，或者您也可以传递您知道100％定义的其他HTMLElement。例如。 document#root。

完整代码可在此处找到：on CodeSandbox