styled-components + typescript

이미 문서가 잘 작성되어 있으니 참고합시다.

styled-components.com/docs/api#typescript

styled-components: API Reference

 

설치

yarn add @types/styled-components styled-components

 

 

props를 사용할 경우의 타이핑

 

다음과 같이 styled에도 제네릭을 사용하여 props를 타이핑해줘야 합니다.

물론 interface를 사용해서 다음과 같이 생략할 수도 있겠지만 생각보다 interface가 많아지면 이를 관리하기가 너무 힘들어집니다. styled-components를 사용할 때는 그냥 인라인 스타일로 제네릭을 적어줍니다.

const Container = styled.div<{ isBlue: boolean }>`
  background-color: ${(props) => (props.isBlue ? "blue" : "transparent")};
`;

function App() {
  const [counter, setcounter] = useState(0);

  const onPlusClick = () => {
    setcounter(counter + 1);
  };

  return (
    <Container isBlue={counter > 3}>
      <div>Hello</div>
      <div>num: {counter}</div>
      <button onClick={onPlusClick}>Plus</button>
    </Container>
  );
}

export default App;