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
Maynards10mo 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
Coder_Carl10mo 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
Maynards10mo 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
Coder_Carl10mo ago
You can Pick(arguments, key of A)
dys 🐙
dys 🐙10mo 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
Maynards10mo ago
Yup, understand that <:mace_laughing:1176448783480012840> Seems like there should be something that works at runtime to split up an object
Want results from more Discord servers?
Add your server