Type for useTexture

[SiegeSailor]

The following snippet is from @react-three/drei#useTexture.

const texture = useTexture(url)

const [texture1, texture2] = useTexture([texture1, texture2])

According to the NPM document, useTexture accepts two kinds of input, which is string | string[]. However, on version 2.2.15, the type for useTexture is useTexture(url: string): Texture | Texture[], which is causing a constraint of inputting string[] and outputting only Texture or Texture[].

For example, the following code is reporting a type error.

const texture = useTexture('/asset/stacy.jpg');

return (
    <group>
        <primitive obejct={object}
        <skinnedMesh {...props}>
            <meshStandardMaterial map={texture} />
            // texture doesn't match `map` property because it only accepts `Texture`, and the type for texture is `Texture | Texture[]`.
        </skinnedMesh>
    </group>
       )

In conclusion, useTexture should be generic, output Texture when the input is string, and output Texture[] when the input is string[].

Package Version

• typescript: 4.1.3
• three: 0.124.0
• @react-three/drei: 2.2.15
• react-three-fiber: 5.3.11

[gsimone]

Could you make a PR?

[Code47X]

I also ran into this problem #176. I did a little digging and I think the current typing for url argument is always evaluating to a non array value. There is probably a more elegant TS solution out there, but this fixed it for me locally:

Current: (string type would never extend any[])
useTexture(url: string extends any[] ? string[] : string): Texture | Texture[];

Fixed for me:
useTexture<T extends string | string[]>(url: T): Texture | Texture[];

[joshuaellis]

duplicate of #176 which now has a moving discussion, personally, i'd track it there.