Typescript + styled-components를 사용할 때 타입 정의를 인식하지 못하는 경우

이전보다 웹 프론트엔드를 개발하는 프로젝트에서 Typescript를 이용하는 경우가 많아졌고, CSS-in-JS 라이브러리의 대표 주자인 styled-components를 사용해 스타일링을 구현하는 프로젝트도 많아졌다.

특히, Typescript와 styled-components를 함께 사용한다면 테마의 프리셋을 미리 설정해두고 UI를 개발할 때 편하게 자동 완성 기능을 이용해 불러와 사용할 수 있다. 스타일 속성을 수정할 때도 테마의 프리셋 파일만 수정하면 되므로 유지보수에 장점이 생긴다.

그러나 이렇게 테마의 프리셋 파일과, 이를 위한 타입 정의 파일로 정의해둔 타입이 적용되지 않고, 인식하지 못하는 경우가 있다.

위의 사진을 보면 타입 정의인 theme.d.ts의 primary 속성과 테마 프리셋인 theme.ts의 primary 속성이 서로 타입이 다름에도 오류를 발생시키지 않는다.

React 프로젝트를 진행하면서, Typescript의 설정도 tsconfig.json 파일에 정상적으로 설정하고, styled-components도 정상적으로 세팅했음에도 타입을 인식하지 못했다.

이는 파일명에 대한 문제로, 원래 타입 정의는 인터페이스 확장을 이용하므로 타입 정의 파일의 이름을 설정하는 것은 자유롭다. 하지만 위처럼 테마 프리셋 파일과 같은 이름인 경우 이렇게 정상적으로 인식하지 못하는 경우가 발생한다.

타입 정의 파일의 이름을 테마 프리셋 파일의 이름과 다르도록 styled.d.ts로 변경하자, VSC가 정상적으로 오류를 감지하는 것을 볼 수 있다.

원문: Medium