usage of apply()/extend() with Typescript

[UltimateForm]

Hi, I am trying to make OrbitControls work with typescript but a key step is failing:
apply({ OrbitControls })
as shown here #27 and explained here https://github.com/drcmda/react-three-fiber#using-3rd-party-non-three-namespaced-objects-in-the-scene-graph

same behavior persists if i use extend instead

is it not supported? something to do with a missing declaration?

edit_1: the method itself gives no error but the impl of it says Property 'orbitControls' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

[drcmda]

Extend injects arbitrary objects into the reconcilers native elements. I don’t know TS but would it even be able to recognize that? For now I have to rely on contributions when it comes to TS, if you could have a look that would be super

[UltimateForm]

hi, i have worked around it by doing this:

declare module JSX{
    interface IntrinsicElements{
        "group": any,
        "geometry": any,
        "lineBasicMaterial": any,
        "mesh": any,
        "octahedronGeometry": any,
        "meshBasicMaterial": any,
        "orbitControls": any //I added this part
    }
}

as suggested by someone on #11 but that only removes the error on VSCode, I still need to fix the other issues and compile and see if it actually works, i'll tell you something once i'm finished

[UltimateForm]

declare module JSX{
    interface IntrinsicElements{
        "group": any,
        "geometry": any,
        "lineBasicMaterial": any,
        "mesh": any,
        "octahedronGeometry": any,
        "meshBasicMaterial": any,
        "orbitControls": any, //I added this
        "primitive": any, //I added this
        "ambientLight": any //I added this
    }
}

I had to add more types to it but it seems kinda clunky like that, and I noted the discussion on #59, what happened to the types suggested there? were they incorporated? either way I'll close this since i fixed it, kind of

[eduter]

If you want correct typing, you can do this:

import { extend, ReactThreeFiber } from 'react-three-fiber';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';


extend({ OrbitControls });

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'orbitControls': ReactThreeFiber.Object3DNode<OrbitControls, typeof OrbitControls>;
    }
  }
}

[Seanmclem]

@gsimone I don't see that this is solved. I still get the same issue

[pencilcheck]

[ReactThreeFiber.Object3DNode ](https://docs.pmnd.rs/react-three-fiber/tutorials/typescript#extending-threeelements)

[iguana-3d]

If you want correct typing, you can do this:

import { extend, ReactThreeFiber } from 'react-three-fiber';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';


extend({ OrbitControls });

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'orbitControls': ReactThreeFiber.Object3DNode<OrbitControls, typeof OrbitControls>;
    }
  }
}

Thanks ♥