Styled Components TypeScriptの環境でpropsを受け取る

propsが一つの場合

type Props = {
  props: DataType
  propsTwo: Boolean
}

type DataType = {
  id: Number
  icon: String
  props: String
}

const Example = ({props}: Props) => (
  <ExampleStyle backgroundColor={props.propsOne}>
  </ExampleStyle>
)

const ExampleStyle = styled.div<{backgroundColor: String}>`
	background-color: ${({backgroundColor}) => `${backgroundColor}`};
`

propsが二つの場合

type Props = {
  props: DataType
  propsTwo: Boolean
}

type DataType = {
  id: Number
  icon: String
  props: String
}

type StyleProps = {
  backgroundColor: String
  propsTwo: Boolean
}

const Example = ({props, propsTwo}: Props) => (
  <ExampleStyle backgroundColor={props.propsOne} propsTwo={propsTwo}>
  </ExampleStyle>
)

const ExampleStyle = styled.div<StyleProps>`
	background-color: ${({backgroundColor}) => `${backgroundColor}`};
  opacity: ${({propsTwo}) => propsTwo && 0.5};
`

参考にした資料

Styled-component typescript Props 받기

프로젝트를 진행하는데 JS로 개발을 할 때에는 styled-component에 props를 전달해주는데 에러가 없었는데 TypeScript로 개발을 함에 있어서 에러가 발생하였다. 에러는 Property 'height' does not exist on type 였다. 이는 props로 받는 값의 타입이 지정되어있지 않다는 뜻인걸 바로 알아차렸지만 어떻게 타입을 적용 시킬지에 대해 찾아보았다. 1) 단일 props 사용시 styled-components를 작성할 때 여러개 props를 사용하여 컴포넌트를 정의한다면 인터페이스를 사용하여 분리하여 사용할 수 있다. 컴포넌트에 타입지정할때는 styled.div 와 같이 사용한다. // styled-components에 1개 props 타입지정 // const ..

https://thsd-stjd.tistory.com/134