[에러 해결] styled-components Could not find declaration file
개발 공부/React

[에러 해결] 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

The error "could not find declaration file for module 'styled-components'" occurs when TypeScript cannot find the type declaration for a styled-components-related module. To solve the error install the types for the module by running the command from the e

bobbyhadz.com

https://darrengwon.tistory.com/109

 

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

Typescript는 js의 슈퍼셋이며 js로 transpile합니다. 동적 타입 언어인 js를 정적 타입 언어로 사용할 수 있게 됩니다. 물론 동적 언어로 발생할 수 있는 에러를 테스트 코드의 커버리지를 높이는 방식

darrengwon.tistory.com

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

 

@types - TypeScript Deep Dive

즉, 이러한 프로젝트를 상호적인 또는 탐색 방식으로 사용할 수 있으며 별도의 창에서 문서를 열 필요가 없으며 오타가 발생하지 않도록 해야 합니다.

radlohead.gitbook.io

https://ingorae.tistory.com/1754

 

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

—save-dev 옵션은 왜 넣을까? ​ Node.js의 npm로 모듈을 설치할 때 아래처럼 --save-dev 옵션을 넣는 경우가 있습니다. 이 옵션은 어떤 의미일까요? $npm install --save-dev babel-cli ​ Node.js에서는 보통..

ingorae.tistory.com

https://llshl.tistory.com/41

 

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

tsc --init 을 통해 생성하는 tsconfig.json파일. 타입스크립트를 시작한지 얼마되지 않았기에 대충 설정파일이구나 하고 넘겼다. 여기 있는 설정들을 살펴보며 타입스크립트의 전체적인 그림을 살펴

llshl.tistory.com