Convert Boost to tsx

[bjornstar]

There are 4 typescript errors that I don't know how to deal with:

src/effects/Boost.tsx:27:9 - error TS2531: Object is possibly 'null'.

27         ref.current.setMatrixAt(i + j, o.matrixWorld)
           ~~~~~~~~~~~

src/effects/Boost.tsx:28:9 - error TS2531: Object is possibly 'null'.

28         ref.current.instanceMatrix.needsUpdate = true
           ~~~~~~~~~~~

src/effects/Boost.tsx:34:37 - error TS2322: Type 'null' is not assignable to type 'BufferGeometry'.

34     <instancedMesh ref={ref} args={[null, null, length]}>
                                       ~~~~

src/effects/Boost.tsx:34:43 - error TS2322: Type 'null' is not assignable to type 'Material | Material[]'.

34     <instancedMesh ref={ref} args={[null, null, length]}>
                                             ~~~~

I figure I should ask for help first before I try more files.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pmndrs/racing-game/4Ac8gmrd9oSF3kQBWMzPJ4EsVBKi
✅ Preview: https://racing-game-git-fork-bjornstar-typescript-effects-boost-pmndrs.vercel.app

[bjornstar]

Ok, now we're left with:

src/effects/Boost.tsx:34:37 - error TS2322: Type 'null' is not assignable to type 'BufferGeometry'.

34     <instancedMesh ref={ref} args={[null, null, length]}>
                                       ~~~~

src/effects/Boost.tsx:34:43 - error TS2322: Type 'null' is not assignable to type 'Material | Material[]'.

34     <instancedMesh ref={ref} args={[null, null, length]}>
                                             ~~~~

[Gusted]

You're not going to like this one.

<instancedMesh ref={ref} args={[null as unknown as BufferGeometry, null as unknown as Material, length]}>

You cant cast null to a defined type, but with a little MITM of unknown you can cast it as any type.

Or you could go the easy way and use

<instancedMesh ref={ref} args={[null as any, null as any, length]}>

These type declarations of this TSX are are a bit incorrect as the instancedMesh will work without these args but still need the length.

[drcmda]

yes, looks like TS types for instancedmesh are wrong, they are most definitively optional. imesh inherits from mesh:

Mesh( geometry : BufferGeometry, material : Material )
geometry — (optional) an instance of BufferGeometry. Default is a new BufferGeometry.
material — (optional) a single or an array of Material. Default is a new MeshBasicMaterial

@joshuaellis could we change these for the next @types/three release?

[joshuaellis]

@drcmda hm, we have to pass count, so null wouldn't suffice as part of the args call anyway, you'd have to replace it with undefined in the args array otherwise the defaults for Mesh wouldn't activate which is why it works.

Maybe @bjornstar you could open an issue in three-ts-types and we can arrange this as a fix.

[bjornstar]

@drcmda hm, we have to pass count, so null wouldn't suffice as part of the args call anyway, you'd have to replace it with undefined in the args array otherwise the defaults for Mesh wouldn't activate which is why it works.

Maybe @bjornstar you could open an issue in three-ts-types and we can arrange this as a fix.

Sure, I've created an issue here: three-types/three-ts-types#92

[joshuaellis]

I've opened an issue in three.js as you can see above. For now I would use //@ts-expect-error and put a link to the three issue.

[bjornstar]

I've opened an issue in three.js as you can see above. For now I would use //@ts-expect-error and put a link to the three issue.

Excellent, thank you!

[bjornstar]

@drcmda @Gusted Thank you, this is exactly what I was hoping to see in the migration to typescript.