nebula.gl
nebula.gl copied to clipboard
TypeScript error: props for EditableGeoJSONLayer not recognized as valid by TypeScript
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.
For now, I solved it like this
const editLayer = new (EditableGeoJsonLayer as any)({
id: 'editable-geojson-layer',
onEdit: (editInfo: any) => {},
pickingRadius: 15,
mode,
Same issue here.
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
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.