Currently, I have a SplitPane component that has the functionality to adjust the size of the second child to fill the remaining space whenever the first child's size changes. While this implementation works, I am looking to enhance the interface by adding some standard properties like className in a more efficient manner. Instead of adding these properties individually as the need arises, I believe extending from the HTMLDivElement interface would be a more streamlined approach.
However, a challenge arises due to the fact that my SplitPane component takes two children, while an HTMLDivElement can accommodate a collection of children with varying lengths. To address this issue, my initial thought was to utilize the Exclude interface as demonstrated below:
export interface SplitPaneProps extends Exclude<HTMLDivElement, 'children'> {
direction: 'vertical' | 'horizontal', // top-to-bottom and left-to-right
children: [ReactNode, ReactNode]
}
Despite implementing the above code, I am encountering a Typescript error that states:
Interface 'SplitPaneProps' incorrectly extends interface 'HTMLDivElement'.
Types of property 'children' are incompatible.
Type '[ReactNode, ReactNode]' is not assignable to type 'HTMLCollection'.ts(2430)
My question is whether I am misusing or incorrectly applying the Exclude interface in this context. Any guidance on how to effectively resolve this issue would be greatly appreciated. Thank you!