Using as prop throws error when using TypeScript

[arafatamim]

The problem

Using the as prop on TwComponent and StyledComponent raises an error when using TypeScript. Not sure if the problem is directly related to twin.macro:

Property 'as' does not exist on type 'IntrinsicAttributes & ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement>'

Although using the prop works as expected in production if you use // @ts-expect-error to sidestep the issue.

[ben-rogerson]

There seems to be an issue with this typing twin provides:

export type TwComponent<K extends keyof JSX.IntrinsicElements> = (
  props: JSX.IntrinsicElements[K]
) => JSX.Element

But you can add your own workaround for now:

// twin.d.ts

// The 'as' prop for styled components
declare global {
    namespace JSX {
        interface IntrinsicAttributes<T> extends DOMAttributes<T> {
          as?: string | Element
        }
    }
}

If anyone wants to help with the updated types please chime in.

[ben-rogerson]

I've updated twin's typescript docs to include the workaround.

Feel free to reopen if you want to adjust the core typings.

[garand]

@ben-rogerson Somewhat related, and I can open a separate issue if needed. Adding the types in the docs throws this type error for me. I have @types/react installed.

node_modules/@emotion/react/types/jsx-namespace.d.ts(17,36): error TS2314: Generic type 'IntrinsicAttributes<T>' requires 1 type argument(s).
node_modules/@types/react/index.d.ts(2990,19): error TS2428: All declarations of 'IntrinsicAttributes' must have identical type parameters.
node_modules/twin.macro/types/index.d.ts(51,15): error TS2428: All declarations of 'IntrinsicAttributes' must have identical type parameters.
src/types/twin.d.ts(18,15): error TS2428: All declarations of 'IntrinsicAttributes' must have identical type parameters.
src/types/twin.d.ts(18,46): error TS2304: Cannot find name 'DOMAttributes'.

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "emitDeclarationOnly": true,
    "declaration": true,
    "declarationDir": "dist",
    "moduleResolution": "node",
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

[nonameolsson]

The same happens for me! :(

[nonameolsson]

Update! I just got it to work (I think).

// twin.d.ts

// The 'as' prop for styled components
declare global {
    namespace JSX {
        interface IntrinsicAttributes<T> extends DOMAttributes<T> {
          as?: string | React.ElementType // CHANGE TO THIS
        }
    }
}

[ben-rogerson]

Thanks to @klzns the 'as' prop is now part of the twin types so the custom global styles mentioned above won't be needed anymore 🎉