TypeScript + React Three Fiber polymorphism

Questions
,
1

Hello,

this might be a very specific question, but it bugs me out why TypeScript complains about type incompatibility in the following example:

interface GridProps {
  TileComponent: JSXElementConstructor<Object3DProps & object>
}

export function Grid({ TileComponent }: ComponentProps<"group"> & GridProps) {
  // Implementation details
}

function App() {
  // Setup
  return (<Grid TileComponent={Tile}  />)
}

Bottom line of the error stack trace:

Property ‘isGroup’ is missing in type ‘Object3D’ but required in type ‘Group’.ts(2322)

So, my Tile implementation is a Three.js Group, while my constructor expects an Object3D. But since Group is a subclass of Object3D I would expect it to be working fine.

Why is the TypeScript compiler complaining about my type hint missing a property from my implementation? Is there something I should change in my code? Should I report this as an issue to React Three Fiber / Three.js?

Thank you very much!

2

Correct, therefore Object3D.isGroup: boolean does not exist on Object3D, isGroup is assigned to Group after extending Object3D…

3

Sure thing. But shouldn’t I be allowed to use Group wherever an Object3D is expected?