zikk Posts - Answer Overflow

zikk

Explore posts from servers

•Created by zikk on 7/1/2023 in #questions

Deep react component typing

hey ts nerds, can someone help me out with this ?

export namespace StyledButton {
    declare const SSpinner: import('styled-components').StyledComponent<Spinner, any, {}, never>;
    declare const SButton: import('styled-components').StyledComponent<'button', any, SButtonProps, never> & {
        Arrow: import('styled-components').StyledComponent<'span', any, SButtonArrowProps, never>;
    }
    // declare namespace SButton {
    //     declare const Arrow: import('styled-components').StyledComponent<'span', any, SButtonArrowProps, never>;
    // }
    declare const ButtonGroup: import('styled-components').StyledComponent<'div', any, ButtonGroupProps, never>;
}

export namespace StyledButton {
    declare const SSpinner: import('styled-components').StyledComponent<Spinner, any, {}, never>;
    declare const SButton: import('styled-components').StyledComponent<'button', any, SButtonProps, never> & {
        Arrow: import('styled-components').StyledComponent<'span', any, SButtonArrowProps, never>;
    }
    // declare namespace SButton {
    //     declare const Arrow: import('styled-components').StyledComponent<'span', any, SButtonArrowProps, never>;
    // }
    declare const ButtonGroup: import('styled-components').StyledComponent<'div', any, ButtonGroupProps, never>;
}

When using this typing, <StyledButton.Sbutton /> works and the editor autocompletes and reads it well, but when i try <StyledButton.SButton.Arrow /> i get not help it's not working (with both methods, the one used or the one commented the whole

export declare const SButton: import('styled-components').StyledComponent<'button', any, SButtonProps, never> & {
    Arrow: import('styled-components').StyledComponent<'span', any, SButtonArrowProps, never>;
}

export declare const SButton: import('styled-components').StyledComponent<'button', any, SButtonProps, never> & {
    Arrow: import('styled-components').StyledComponent<'span', any, SButtonArrowProps, never>;
}

alone isn't working as i wanted it, i've seen it done like that though (in the mantine .d.ts files on their input component) Edit: if i declare it like this it works

declare const SButton: React.FC<SButtonProps> & { Arrow: ..whatever }

declare const SButton: React.FC<SButtonProps> & { Arrow: ..whatever }

This is probably due to the fact that when i install this package in another project it doesn't get styled-components typing somehow Edit 2 : figured out the "solution", add the styling package as a peer depency so the used of the package has to install it, i don't know if better can be done though

2 replies

Gaming

Programming