[에러 해결] styled-components Could not find declaration file

🩺 에러 발생

 

평소처럼 App파일에 GlobalStyle 지정해주려고 styled-components 라이브러리를 npm으로 설치해주었다.

npm install styled-components

이미 고쳐버려서 지워진 빨간 줄...

 

분명 잘 깔렸다고 떴는데 저 from 뒤의 'styled-components'에 다음과 같은 에러 문구가 떴다.

Could not find a declaration file for module 'styled-components'.
👉 'styled-components' 모듈에 대한 선언 파일을 찾을 수 없습니다.

 

왜요 잘 깔렸다면서 왜 그러세요

이런 적 없었잖아

 

 

💊 에러 해결

왜 이런 문제가 발생하나 했더니 TypeScript가 styled-components와 연관된 모듈에 대한 선언 파일을 찾이 못하면 이런 문제가 발생하는 듯하다. 아마 전에 한 번도 TypeScript를 써본 적이 없어서 처음 보는 것이었나보다.

npm i --save-dev @types/styled-components

• @types
  • npm module에서 @type의 의미는 타입 선언만 포함하는 모듈을 의미한다.
  • 기본적으로 @types로 설치한 패키지들은 컴파일 목록에 포함된다. 하지만 만약 typeRoots property가 특정 경로들로 지정되어 있다면 오직 그 경로에 존재하는 패키지들만 컴파일 목록에 포함된다.
  • TypeScript 2.0부터 가능해진 내장 type definition 시스템으로 인해 @types/모듈명 으로 설치한 패키지는 types나 typeRoots를 설정해주지 않아도 기본적으로 자동으로 모두 읽어와 활용할 수 있게 되었다. 즉, node_modules/@types 내의 모든 경로를 찾아서 사용한다.
• --save-dev
  • 모듈을 설치할 때 package.json 내의 devDependencies 항목에 설치한 모듈과 버전을 넣는다는 의미이다.
  • dev로 시작되는 이름에서 볼 수 있듯이 개발용으로 쓸 경우 devDependencies에 기록한다.
  • 더 자세한 내용은 https://ingorae.tistory.com/1754 [잉고래의 잇다이어리] 님의 글에 잘 정리되어 있다.

 

즉, TypeScript를 사용하는 프로젝트에 모듈을 설치 @type을 붙이는 이유는 @type없이 설치할 경우 모듈의 내부 코드에 대한 type이 정의되어 있지 않아 이 라이브러리를 들고 와서 사용할 때 TypeScript 파일에서 type추론이 불가능하기 때문입니다~!!!

 

 

 

TypeScript는 이름에서도 알 수 있듯이 type에 아주 깐깐한 친구죠.

그러니 TypeScript를 사용하는 프로젝트에서 npm으로 라이브러리를 받을때 @type 꼭 붙여주기!! 

 

 

 

 

 

 

📖 참고

 

https://bobbyhadz.com/blog/typescript-could-not-find-a-declaration-file-for-module-styled-components

Fix - styled-components Could not find declaration file | bobbyhadz

https://darrengwon.tistory.com/109

Typescript 사용 환경 설정, tsconfig의 속성들

https://radlohead.gitbook.io/typescript-deep-dive/type-system/types

@types - TypeScript Deep Dive

https://ingorae.tistory.com/1754

npm install --save-dev를 쓰는 이유

https://llshl.tistory.com/41

[NodeJS] tsconfig.json에 대해 알아보자