[TS] StyledComponents 에서 props타입 지정하기.

TypeScript & StyledComponents 에서 props타입 지정하기.

---

안녕하세요. 이번 포스팅에서는 TypeScript를 사용할때, StyledComponent에 props타입을 지정하는 방법에 대해 알아보겠습니다.

 

TypeScript에서는 타입을 지정하지 않고,  임이의 props를 사용할 경우 오류를 뱉습니다.. 아래 사진처럼요..

그렇다면 props에 대한 타입은 어떻게 지정하면 되는 걸까요 !?

예시코드를 통해 StyledComponent를 통해 props에 타입 지정하는 방법을 확인해 봅시다.

 

 

> 타입 직접 지정.

// const Container = styled.div< {프롭스명 : 타입지정} >`
const Container = styled.div< { age : number } >`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
`;

 

> interface를 활용한 타입 지정.

interface Container {
  isActive: boolean;
  age: number;
}

const Container = styled.div<Container>`
  color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;