v2.1.1 Typescript error: Property '$as' is missing in type

Hello. We have upgraded the package from 2.0.4 to 2.1.1 and received new typescript errors all over the codebase. Most of them indicate some kind of issue with the new $as prop. For example:

src/components/Navigation/NavBar.tsx(225,12): error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { onClick?: MouseEventHandler<HTMLAnchorElement> | undefined; className?: string | undefined; color?: string | undefined; id?: string | undefined; ... 262 more ...; $active?: boolean | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Property '$as' is missing in type '{ children: TFunctionResult; onClick: () => void; }' but required in type '{ onClick?: MouseEventHandler<HTMLAnchorElement> | undefined; className?: string | undefined; color?: string | undefined; id?: string | undefined; ... 262 more ...; $active?: boolean | undefined; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<TailwindComponent<Pick<Pick<ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement>, "key" | keyof AnchorHTMLAttributes<...>> & RefAttributes<...>, "key" | keyof AnchorHTMLAttributes<...>> & RefAttributes<...>>, ... 4 more ..., TailwindComponent<...>>): ReactElement<...>', gave the following error.
    Property '$as' is missing in type '{ children: TFunctionResult; onClick: () => void; }' but required in type '{ onClick?: MouseEventHandler<HTMLAnchorElement> | undefined; className?: string | undefined; color?: string | undefined; id?: string | undefined; ... 262 more ...; $active?: boolean | undefined; }'.

The source code is as simple as follows:

const LogInAnchor = tw.a`
  ...
`
const TwAnchor = tw(LogInAnchor)`
  ...
`
const Anchor = styled(TwAnchor)<{ $active?: boolean }>`
  ...
`
// later, error at the render site
<Anchor>Logout</Anchor>

By looking at the library’s source code I couldn’t understand why is the $as prop reported as missing, since it seems to be optional. Do you have any idea why this error occurs and how to fix it?

[MathiasGilson]

ok sorry I was actually able to reproduce after putting strict: true in my tsconfig.

Some of the $as prop declaration were missing an optional ? character.

It’s now fixed on the version 2.1.2

Thank you for reporting this issue!

[Dudeonyx]

@MathiasGilson

Yeah sorry, I noticed the issue comes up when strict=true in tsconfig as well.

Unfortunately there are also some very rare weird edge cases I also noticed that only occur when strict is true, these happen even in pre 2.1.0 versions. Like I get an error when using tw on a Component without a className prop.

const Component = (props:{ others: string}) => <div {...props} />

const StyledComponent = tw(Component)`` // gives type error

And also optional props added using type constructors(?) get stripped out.

type WithChildren<P> = P & { children?: any }

const Component = (props: WithChildren<{ others: string}>) => <div {...props} /> // Component has prop type `{ others: string } & { children?: any }`

const StyledComponent = tw(Component)`` // StyledComponent has prop type { others: string }

const node = <StyledComponent>hello</StyledComponent> // gives type error

I am working on a PR that has fixed these but I want to test further to be sure.