1 reply

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

.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

TTC

Theo's Typesafe Cult•3y ago•

1 reply

zikk

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>;
}

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

.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 }

Deep react component typing

Similar Threads

Deep react component typing

Similar Threads

Similar Threads

Similar Threads