Kevin Powell - Community•5mo ago

How do I destructure an object that extends multiple interfaces into each of those interfaces?

I'm looking for a way to extract the props, for each interface, from an object that extends multiple interfaces. The use case for this is where I've created a composite component and want to expose all the properties from components A & B on C.

interface A {
    a1: string,
    a2: string
}

interface B {
    b1: string,
    b2: string
}

interface C extends A, B {

}

export default function ComponentC({ ...aProps, ...bProps }: C) {
    const overrideA1 = `${...aProps.a1} Custom`;

    return (
        <ComponentA {...aProps} a1={overrideA1}>
            <ComponentB {...bProps} />
        </ComponentA>
    )
}

interface A {
    a1: string,
    a2: string
}

interface B {
    b1: string,
    b2: string
}

interface C extends A, B {

}

export default function ComponentC({ ...aProps, ...bProps }: C) {
    const overrideA1 = `${...aProps.a1} Custom`;

    return (
        <ComponentA {...aProps} a1={overrideA1}>
            <ComponentB {...bProps} />
        </ComponentA>
    )
}

I appreciate { ...aProps, ...bProps }: C is not valid, but is merely to simulate the desired outcome.

6 Replies

Maynards•5mo ago

I'll also add that, for small interfaces like those examples you could get away with { a1, a2, b1, b2 }, but many interfaces come with a lot more properites than that <:mace_laughing:1176448783480012840> .

Coder_Carl•5mo ago

I believe it's just going to come down to the function itself and it's return type. (I'm presuming that the arguments are not being fed in as 2 separate args?)

Maynards•5mo ago

No, I was trying to avoid doing:

interface C {
    aProps: A,
    bProps: B
}

interface C {
    aProps: A,
    bProps: B
}

I'm coming from a C# background where you can cast an object to it's interface (var a = (A)cObject) and you'd only get the properties that come from the interface A at runtime. C# doesn't have the notion of "prop spreading" though and I know at runtime the underlying object will have all the properties and spread both A & B props onto ComponentA and ComponentB.

Coder_Carl•5mo ago

You can Pick(arguments, key of A)

dysbulic 🐙•5mo ago

It's important to bear in mind that unlike C++ interfaces, TypeScript is (in general) removed at build time. It has no effect on how the program runs.

Maynards•5mo ago

Yup, understand that <:mace_laughing:1176448783480012840> Seems like there should be something that works at runtime to split up an object

Gaming

Programming

How do I destructure an object that extends multiple interfaces into each of those interfaces?