TypeScript: args for color node only accept types matching second constructor overload for THREE.Color

[neefrehman]

when trying to set the args prop for the <color /> node using a string or Color instance in TS, you get a type error.

the types for this in Three are correct, the complication is there are two constructors, the second one being an overload to allow for rgb args.

it looks like the NodeProps<Color> type only recognises this second overload and so will show an error if you pass any arguments that arent [number, number, number].

i've been searching through the type files on three and r3f but can't find any way for the NodeProps type to support both overloads.

[Fasani]

I'll fix this.

[Fasani]

Could you include more code as I do not seem to have the same issue? Did you make your own type for color?

[Fasani]

https://github.com/react-spring/react-three-fiber/blob/master/src/three-types.ts#L296

[neefrehman]

@Fasani no custom types! All I need to get the error is to use a string as args in the color node, like so:

<color attach="background" args={["#ffffff"]} />

Minimal demo with error here: codesandbox link

[drcmda]

color in threejs is defined as

export class Color {
  constructor( color?: Color | string | number )
  constructor( r: number, g: number, b: number )

And we use ConstructorParameters to figure out arguments ...

type Args<T> = T extends new (...args: any) => any ? ConstructorParameters<T> : T

export interface NodeProps<T, P> {
  args?: Args<P>
  ...

export type Node<T, P> = Overwrite<Partial<T>, NodeProps<T, P>>

color: ReactThreeFiber.Node<THREE.Color, typeof THREE.Color>

so, does TS support constructor overloads in ConstructorParameters ?

EDIT:

doesn't look like it ... microsoft/TypeScript#37079

[neefrehman]

thats frustrating. I can't see any other overloaded constructors in three classes, so maybe not a broad enough issue for a fix? Using the suggested hack (shortened for only 2 overloads) in that issue would give us something like:

color: ReactThreeFiber.Node<ColorParams, typeof ColorParams>

...

type OrderedColorParams = OverloadedConstructorParameters<typeof THREE.Color>; // [[string | number | THREE.Color], [number, number, number]]
type ColorParams = OrderedColorParams[number]; // [string | number | THREE.Color] | [number, number, number]

type ConstructorOverloads<T> =
    T extends {
        new(...args: infer A1): infer R1; new(...args: infer A2): infer R2
    } ? [
        new (...args: A1) => R1, new (...args: A2) => R2
    ] : T extends {
        new(...args: infer A1): infer R1
    } ? [
        new (...args: A1) => R1
    ] : any

type OverloadedConstructorParameters<T> =
    ConstructorOverloads<T> extends infer O ?
    { [K in keyof O]: ConstructorParameters<Extract<O[K], new (...args: any) => any>> } : never

which looks to (kind of?) fix the args types, but gives rise to some array-type-related problems when using color that I can't make head or tails of:

[drcmda]

it would be better to give color a customized definition. it looks to me like OverloadedConstructorParameters is quite a mess. can someone do that? i wouldn't know how ... but doing it directly where color is defined:

color: ReactThreeFiber.Node<THREE.Color, typeof THREE.Color> <---overwrite Args with constructorargs
                                                                 + overload for color | string | number

[neefrehman]

i've just tried a few things to do this but nothing's worked yet. It's slightly out of my grasp i think

[xih]

@neefrehman @drcmda Do we have a workaround for this typescript error?

Running into the same issue

[CodyJasonBennett]

Which versions of R3F and @types/three are you using?

[xih]

@CodyJasonBennett

"@react-three/fiber": "^8.13.4",
"@types/three": "^0.153.0",

I'm just trying to fix this simple type error:

[CodyJasonBennett]

You'll need to update to the latest version which includes a fix https://github.com/pmndrs/react-three-fiber/releases/tag/v8.13.5.

[xih]

@CodyJasonBennett

Sweet - that worked! thank you :))