使用 TypeScript 的 react-leaflet 中的 mapbox-gl-leaflet？

Question

我正在尝试让中描述的这个实现正常工作，但我使用的是 TypeScript。

所以我的文件看起来像这样：

import * as L from "leaflet";
import {} from "mapbox-gl-leaflet";
import * as PropTypes from "prop-types";
import { GridLayer, withLeaflet } from "react-leaflet";

class MapBoxGLLayer extends GridLayer {
  createLeafletElement(props) {
    return L.mapboxGL(props);
  }
}

/*
* Props are the options supported by Mapbox Map object
* Find options here:https://www.mapbox.com/mapbox-gl-js/api/#new-mapboxgl-map-options-
*/
MapBoxGLLayer.propTypes = {
  accessToken: PropTypes.string.isRequired,
  style: PropTypes.string
};

MapBoxGLLayer.defaultProps = {
  style: "mapbox://styles/mapbox/streets-v9"
};

export default withLeaflet(MapBoxGLLayer);

但是我收到以下错误：

Property 'mapboxGL' does not exist on type 'typeof import("c:/Users/.../node_modules/@types/leaflet/index")'.ts(2339)

所以 leaflet 没有 mapboxGL 的定义（这是有道理的，因为 mapboxGL 不是它的一部分）——但是我如何创建或引用允许我调用 L.mapboxGL 的 mapboxGL 定义（道具）？

Answer 1

要解决此错误，需要安装 type definitions for mapbox-gl-leaflet，例如：

npm install --save @types/mapbox-gl-leaflet

最后但同样重要的是，react-leaflet type definitions 目前不与 react-leaflet v2 完全兼容，需要进行一些额外的调整。由于 @types/react-leaflet is targeting react-leaflet v1, some type definitions from version 2 are missing (refer this thread for a more details), for example withLeaflet HOC. The good news is a PR 的当前版本添加了对版本 2 的支持，因此已经提交（但尚未批准）

无论如何，缺失的 withLeaflet 类型 def 可以这样声明：

declare module "react-leaflet" {
  const withLeaflet: <T>(component: T) => T;
}

最后组件可以这样实现：

import * as L from "leaflet";
import "mapbox-gl-leaflet";

declare module "react-leaflet" {
  const withLeaflet: <T>(component: T) => T;
}


import {Children, MapLayer, withLeaflet} from "react-leaflet";


export interface IMapboxGLProps extends L.MapboxGLOptions {
  children?: Children;
}


class MapBoxGLLayer extends MapLayer<IMapboxGLProps,{}> {

  public static defaultProps = {
    style: "mapbox://styles/mapbox/streets-v9"
  };

  public createLeafletElement(props:IMapboxGLProps)  {
    return L.mapboxGL(props);
  }

  public render() {
    return null
  }
}

export default withLeaflet(MapBoxGLLayer);

Here is a demo

使用 TypeScript 的 react-leaflet 中的 mapbox-gl-leaflet？

mapbox-gl-leaflet in react-leaflet with TypeScript?

react-leaflet

mapbox-gl-leaflet