4월 17일

Styled-Components

타입추론 Error 발생

Styled-Components로 만드는 컴포넌트를 Typescript가 추론하지 못하는 버그가 발생하였다

interface LayoutContainerProps {
  paddingTop: number;
}

const LayoutContainer = styled.View<LayoutContainerProps>`
  display: flex;
  width: 100%;
  min-height: 100%;
  padding-top: ${(props) => `${props.paddingTop + 50}px`};
  background-color: pink;
`;

위 코드에서 padding-top에 props가 any로 추론되고 LayoutContainer 자체도 any로 추론되는 버그가 발생하였고 이를 찾기위해 수많은 모듈을 뒤져가면서 해결하려고 했다

해본방법

1. Typescript 버전 맞추기
2. @types/styled-components-react-native와 호환되는 Typescript 버전 찾기
3. 모듈 삭제후 재 다운로드
4. tsconfig 설정 건들여보기 등등 많은 시도를 해봤지만 실패했다

해결

결국 해결은 했는데 근본적인 문제가 추론을 못하는 것이다 보니 React Native의 Type에 관련된 모듈을 사용했던 경험들을 구글에 검색하게 되었는데 거기서 @tsconfig/react-native 라는 모듈을 사용하는 게시글을 확인 후 다운 받아봤더니 해결되었다..!
하루종일 이걸 해결하려고 노력했는데.. 왜 이게 해결해주는지는 모듈을 확인 해봐야 할꺼같다 :) 해결되서 기쁜하루였다