用打字稿反应地图 gl

Question

你好，所以我对 React 还很陌生，但我选择了使用 typescript（我也是新手）而不是原始 JS。话虽如此，我无法将图层添加到 react-map-gl 元素。 这是我得到的错误代码

Type '{ id: string; type: string; paint: { 'sky-type': string; 'sky-atmosphere-sun': number[]; 'sky-atmosphere-sun-intensity': number; }; }' is not assignable to type 'LayerProps'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type '"symbol" | "sky" | "circle" | "line" | "fill" | "fill-extrusion" | "raster" | "background" | "heatmap" | "hillshade"'.ts(2322)

看起来它说它想要一个枚举？ 以下是相关的代码：

const skyLayer = {
    id: 'sky',
    type: 'sky',
    paint: {
      'sky-type': 'atmosphere',
      'sky-atmosphere-sun': [0.0, 0.0],
      'sky-atmosphere-sun-intensity': 15
    }
  };

这个是给我红色波浪线的那个（在图层下）：

<Layer {...skyLayer} />

以及我尝试遵循的示例代码： https://github.com/visgl/react-map-gl/blob/6.1-release/examples/terrain/src/app.js

EDIT1：我按照代码中的建议进行了更改，但似乎无法解决问题。这是我得到的错误：

Type '{ id: string; type: "sky"; paint: { "sky-type": string; "sky-atmosphere-sun": number[]; "sky-atmosphere-sun-intensity": number; }; }' is not assignable to type 'LayerProps'.
  Types of property 'paint' are incompatible.
    Type '{ "sky-type": string; "sky-atmosphere-sun": number[]; "sky-atmosphere-sun-intensity": number; }' is not assignable to type 'BackgroundPaint | FillPaint | FillExtrusionPaint | LinePaint | SymbolPaint | RasterPaint | CirclePaint | HeatmapPaint | HillshadePaint'.
      Type '{ "sky-type": string; "sky-atmosphere-sun": number[]; "sky-atmosphere-sun-intensity": number; }' has no properties in common with type 'HillshadePaint'.ts(2322)

Answer 1

您应该在声明 skyLayer 时为 type 标明数据类型。因为默认的type 将是字符串并且不能传递给Layer。您可以使用as 来做到这一点：

  const skyLayer = {
    id: 'sky',
    type: 'sky' as 'sky',
    paint: {
      'sky-type': 'atmosphere',
      'sky-atmosphere-sun': [0.0, 0.0],
      'sky-atmosphere-sun-intensity': 15
    }
  };