React app with Typescript failes to find the component interfaces

[fragsalat]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

• Open sandbox
• Open StyledComponents.tsx
• Wait for the compiler to finish and for the packages to load (might take a while)
• You should see an typescript error

Exported variable 'StyledAlert' has or is using name 'AlertInterface' from external module "/sandbox/node_modules/antd/lib/alert/index" but cannot be named

This error happens for a lot of components which for some reason use private interfaces

What is expected?

All interfaces used for exports are exported and typescript can grab them

What is actually happening?

Typescript can not build type definition from hidden interfaces

Environment	Info
antd	4.17.2
React	any
System	any
Browser	any

---

Please check all components for those non exported interfaces. There are more. Table for instance. Referring to this older ticket https://github.com/ant-design/ant-design/issues/24864

[afc163]

https://codesandbox.io/s/gallant-firefly-2w1sm

[fragsalat]

Can't we just fix this instead of living with workarounds? I even provided a PR. typeof might work in this case but when extending a component for some reason it can get tricky to create the types. Also it would mean every people has to use typeof on every component which get's styled which uses internal interfaces.

[fragsalat]

So If I use :typeof and re-export it, the file using the re-exported component then complains about the missing interface. TS4082: Default export of the module has or is using private name 'TableInterface'

The only proper solution is to export the used interfaces as well.

[sladg]

This works for me on 4.23

export const WrapperContent = styled(Layout as FC<LayoutProps>)<{
  $noPadding: boolean;
}>`
  padding-top: ${({ $noPadding, theme }) => $noPadding === true ? 0 : 20}px;
`;