How to correctly convert jsx to tsx

Question

How to correctly convert exited jsx file from npx gltfjsx command to TypeScript file? Couldn't correct the errors.

import React, {useRef} from 'react'
import { useGLTF } from '@react-three/drei'

export default function Crown(state: any, { ...props }) {
    const group = useRef()
    // @ts-ignore
    const { nodes, materials } = useGLTF('/crown.glb') //TS2339: Property 'materials' does not exist on type 'GLTF'.
    return (
        <group
            // @ts-ignore
            ref={group} //TS2322: Type 'MutableRefObject<undefined>' is not assignable to type 'Ref<Group> | undefined'.   Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<Group>'.     Types of property 'current' are incompatible.       Type 'undefined' is not assignable to type 'Group | null'.
            {...props}
            dispose={null}
        >
            <mesh..../>
            <mesh..../>
            <mesh..../>
            <mesh..../>
        </group>
    )
}

useGLTF.preload('/crown.glb')

Regarding the first problem you can use this [story](https://drei.pmnd.rs/?path=/story/loaders-gltf--use-gltf-scene-st) as an example, and for the second try `const group = useRef(null)` — tromgy, May 04 '22 at 02:24
I think you may need to provide a type for `useRef`.. in other words, `useRef()` might work for now, later you can provide correct type there — tanmay, May 04 '22 at 04:17

score 5 · Accepted Answer · answered May 21 '22 at 23:46

The gltfjsx module has a types flag available so you don't have to do it manually.

Whenever I want to convert a .glb to .tsx, I simply do npx gltfjsx file.glb -t or npx gltfjsx file.glb --types

Sometimes this gives an error for the ref, if you don't need ref you can delete it, if you do my workaround has been defining the ref type:

 <group
      ref={group as Ref<THREE.Group>}
      {...props}
      dispose={null}
    >
...
</group>

How to correctly convert jsx to tsx

1 Answers1