Using styled components "as" prop with typescript

Question

I'm currently building a pattern library in which I've built a Button component using React and styled-components. Based on the Button component, I want all my Links component to look exactly the same and receive exactly the same props. For that purpose, I'm using the as prop from styled-components, which allows me to use that already built element as another tag or component.

Button Component

import * as React from 'react'
import { ButtonBorderAnimation } from './ButtonAnimation'
import { ButtonProps, ButtonVariant } from './Button.types'
import { ButtonBase, LeftIcon, RightIcon } from './Button.styled'

function Button({
  variant = ButtonVariant.Filled,
  children,
  leftIcon = null,
  rightIcon = null,
  ...props
}: ButtonProps): JSX.Element {
  return (
    <ButtonBase variant={variant} {...props}>
      {variant !== ButtonVariant.Ghost ? (
        <ButtonBorderAnimation {...props} />
      ) : null}
      {leftIcon ? <LeftIcon>{leftIcon}</LeftIcon> : null}
      {children}
      {rightIcon ? <RightIcon>{rightIcon}</RightIcon> : null}
    </ButtonBase>
  )
}

export default Button

Button Types

export interface ButtonProps {
  children: React.ReactNode
  variant?: 'filled' | 'outlined' | 'ghost'
  size?: 'small' | 'regular'
  underlinedOnHover?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  inverse?: boolean
}

export enum ButtonVariant {
  Filled = 'filled',
  Outlined = 'outlined',
  Ghost = 'ghost',
}

export enum ButtonSize {
  Small = 'small',
  Regular = 'regular',
}

Link Component

import * as React from 'react'
import Button from '../Button/Button'
import { Link as LinkRouter } from 'react-router-dom'
import { LinkProps } from './Link.types'

function Link({ to, ...props }: LinkProps): JSX.Element {
  return <Button to={to} as={LinkRouter} {...props} />
}

export default Link

Link Types

import { ButtonProps } from '../Button/Button.types'
import { LinkProps } from 'react-router-dom'

type RouterLinkWithButtonProps = ButtonProps & LinkProps

export interface LinkProps extends RouterLinkWithButtonProps {}

When I do the above, this problem comes us...

Property 'to' does not exist on type 'IntrinsicAttributes & ButtonProps'.

...which makes sense because button doesn't have the prop to which is required for the Link component from react-router-dom.

How will you approach something like this? Where when using the Button the to prop shouldn't even be in the type and when using the Link the to should be required.

Uses

<Button>Hello</Button>
<Link to="/somewhere">Hello</Link>

Why not define `button` component to have a `Link` inside? In your file `../Button/Button` ? — its4zahoor, Jul 04 '19 at 10:11
Is it possible to show your `button` implementation? Will be more easy to answer then. — its4zahoor, Jul 04 '19 at 10:16
@its4zahoor Added the button implementation in the question. — Alejandro Garcia Anglada, Jul 04 '19 at 10:34
@its4zahoor The answer to you first comment is: I would like to treat them separately, but still having the same style and props. This is more a typescript kind of problem, not a react one. — Alejandro Garcia Anglada, Jul 04 '19 at 10:38
This might give some ideas https://medium.com/dailyjs/typescript-create-a-condition-based-subset-types-9d902cea5b8c — Doğancan Arabacı, Jul 04 '19 at 10:39
This is a work around, check this https://spectrum.chat/styled-components/general/typescript-extending-a-styled-component-and-overriding-the-as-prop~76beee1d-610c-437d-844f-0fd4bcadac36 — its4zahoor, Jul 04 '19 at 11:22
You can create a facade on top of your union. See this tweet for intuition: https://twitter.com/WrocTypeScript/status/1122952350178643968 — Karol Majewski, Jul 05 '19 at 20:03

kimamula · Accepted Answer · 2019-07-06T10:20:34.493

This should work.

function Link(_props: LinkProps): JSX.Element {
  const props = { as: LinkRouter, ..._props };
  return <Button {...props} />
}

Note that TypeScript applies strict object literal assignment checks which can be loosened by assigning an object literal to a variable beforehand instead of directly passing it as, for example, an function argument, which is consistent with the React component props assignment behavior.

declare function foo(arg: { a: number }): void;

foo({ to: '', a: 1 }); // error

const arg = { to: '', a: 1 };
foo(arg); // no error

Using styled components "as" prop with typescript

1 Answers1