uber / nebula.gl

A suite of 3D-enabled data editing overlays, suitable for deck.gl
https://nebula.gl/
Other
695 stars 165 forks source link

TypeScript error: props for EditableGeoJSONLayer not recognized as valid by TypeScript #568

Open JulesBlm opened 3 years ago

JulesBlm commented 3 years ago

Describe the bug

I'm using DeckGL with Nebula.gl in a TypeScript project with deckgl-typings v4.9.2. I'm trying to construct an EditableGeoJSONLayer in a functional React component as follows.

  const [mode, setMode] = useState(() => ViewMode);
  const [selectedFeatureIndexes, setSelectedFeatureIndexes] = useState([]);
  const [featureCollection, setFeatureCollection] = useState(demoGeoJSON); //

  const editLayer = new EditableGeoJsonLayer({
    id: "editable-geojson-layer",
    data: featureCollection,
    // The following props are not recognized on EditableGeoJsonLayer works fine with // @ts-ignore comment though
    onEdit: (editInfo: any) => {
      setFeatureCollection(editInfo.updatedData);
    },
    pickingRadius: 15,
    mode,
    selectedFeatureIndexes
  });

Actual Result

All EditableGeoJSON layer specific props (mode, selectedFeatureIndexes, onEdit, pickingRadius) are not recognized as valid props by TypeScript and the following TypeError arises

Argument of type '{ id: string; onEdit: (editInfo: any) => undefined; pickingRadius: number; mode: typeof ViewMode; selectedFeatureIndexes: never[]; data: FeatureCollection<Geometry, GeoJsonProperties>;  }' is not assignable to parameter of type 'CompositeLayerProps<any>'.

Object literal may only specify known properties, and 'onEdit' does not exist in type 'CompositeLayerProps<any>'.

Placing a // @ts-ignore comment above the props makes it work, this is not an option for me however.

Expected Result

EditbableGeoJSON props should be seen as valid by TypeScript.

Reproduce Steps

See this CodeSandbox I made with a reproduction of the bug

My tsconfig.json settings are as follows

{
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "build/dist",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "strictNullChecks": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "downlevelIteration": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src"
  ]
}

After some digging in the nebula.gl source code, I noticed that these props are in the defaultProps of EditableGeoJSONLayer and that there's an unfinished type Props that is currently commented out . Could this be the source of the issue? Or perhaps the 3rd party DeckGL typings? I see nebula.gl itself uses these too but at v3.4.8. I triede downgrading to deckgl typings v3.4.8 doesn't that didn't help.

JulesBlm commented 3 years ago

For now, I solved it like this

 const editLayer = new (EditableGeoJsonLayer as any)({
    id: 'editable-geojson-layer',
    onEdit: (editInfo: any) => {},
    pickingRadius: 15,
    mode,
suryakumara commented 2 years ago

Same issue here.

callmeioy commented 1 year ago

For now, I solved it like this

 const editLayer = new (EditableGeoJsonLayer as any)({
    id: 'editable-geojson-layer',
    onEdit: (editInfo: any) => {},
    pickingRadius: 15,
    mode,

me too,use same solution

ben-xD commented 8 months ago

When I tried the EditableGeoJsonLayer as any approach, I got an error when using the vite dev server, though the production build still built

[vite] Internal server error: 
  × Expected ',', got 'any

Also, since any shouldn't really be used (my project would need to ts-ignore and then eslint-ignore that ts-ignore), I found it nicer to just use @ts-expect-error, like:

  const editableGeojsonLayer = new EditableGeoJsonLayer(
    // @ts-expect-error TS2554
    editableGeojsonLayerProps
  );

or a more documented version:

  const editableGeojsonLayer = new EditableGeoJsonLayer(
    // Workaround for error `TS2554: Expected 0 arguments, but got 1.`,
    // see https://github.com/uber/nebula.gl/issues/568#issuecomment-1986910461
    // @ts-expect-error TS2554
    editableGeojsonLayerProps
  );

I also had this issue with other layers, like SelectionLayer, I suspect that is less used so no one has created an issue for it.

kaligrafy commented 3 months ago

Same problem here, must use as any, which is not great

ibgreen commented 3 months ago

https://github.com/uber/nebula.gl/discussions/901