TypeScript에서 styled-components의 Tips 사용

TS에서 styled-components를 사용하는 경우가 많은데 의외로 정리된 기사가 없어서 자주 물어봐서 썼어요.

props에서 정형화하기

부모님이 특정한reactcomponent가 아닐 때는 아래와 같이 간단하게 쓰시는 것을 추천합니다.

const Button = styled.button<{primary: boolean}>`
  color: ${({primary}) => primary ? 'skyblue' };
`

구성 요소가 복잡해지거나 부모 프로필을 인용하면Pick을 사용하면 유지보수 비용을 낮출 수 있습니다

interface Props {
  primary
  secondary
  // 略
}

function MyComponent(props: Props) {
  return (
    <div>
      <Button secondary={props.secondary} primary={props.primary}>{props.children}</Button>
    </div>
  )
}

const Button = styled.button<Pick<Props, 'primary' | 'secondary'>>`
  ${({primary, secondary}) => primary ? css`` : secondary ? css`` : css``}
`

정수에 문형을 더하다

색상과 사이즈 등의 상수에 금형을 더하면 사용할 때 어떤 px를 적용하는 것이 편리한지 알 수 있다.

const FONT = {
  XXXLARGE: 32,
  XXLARGE: 24,
  XLARGE: 18,
  LARGE: 16,
  MEDIUM: 14,
  BASE: 12,
  SMALL: 11,
  XSMALL: 10,
  TINY: 8,
} as const

const FONT_WEIGHT = {
  NORMAL: 400,
  BOLD: 600,
} as const

const BORDER_RADIUS = 4 as 4

export default {
  FONT,
  FONT_WEIGHT,
  BORDER_RADIUS
}

이렇게 하면 ↓편집기의suggestion 기능에서 어느 상수가 어느 px를 가지고 있는지 확인할 수 있다.

css prop 사용 시

babel-plugin과 babel macro에서 사용하는 css prop은 jsx의 확장이기 때문에 아무것도 하지 않으면 TS에게 욕을 먹습니다.
type root의 index입니다.d.ts로 아래의 내용을 기술하면 해결할 수 있다.(styled-components/cssprop react 확장)

import {} from 'styled-components/cssprop'

attrs 사용 시

이것은 좀 번거로운 작법이 필요하기 때문에, 원래attrs를 자주 사용하지 않을 수도 있습니다.

const StyledImg = styled.img.attrs<{ logoSrc: logoSrc }>(
  ({logoSrc}) => ({
    src: logoSrc,
  })
)<{ logoSrc: logoSrc }>``