React map gl with typescript

user_15921143 0
Viewed 1046

Hello so I'm fairly new to React, but I have made the choice of going through typescript (which I'm also new too) as opposed to raw JS. Having said that Im having trouble adding layers to a react-map-gl element. Here is the error code that I'm getting

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)

Which looks lke it says that it wants an enum? Here are the offeding pieces of code:

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

and this one which is the one that gives me red squigglies (under Layer):

<Layer {...skyLayer} />

And the sample code that I'm trying to follow: https://github.com/visgl/react-map-gl/blob/6.1-release/examples/terrain/src/app.js

EDIT1: I changed things as suggested in the code but I cant seem to fix the issue. Here is the error that I am getting:

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)
mapbox-gl-js typescript reactjs
1 Answers

You should decalre data type for type when you declare skyLayer. Because the default type will be string and can' be pass into Layer. You can use as to do it:

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