타입스크립트를 연습하기 위해 진행하고 있는 작은 개인 프로젝트에서는 styled-components가 아닌 css파일을 따로 import해 사용하기로 했다.
리액트를 공부할 때 항상 styled-components를 사용해 왔었는데, 스타일 관련 코드와 분리가 되지 않는다는 단점이 있어 따로 분리하는 것이 좋다는 의견을 들어 이번에는 css 모듈 방식으로 진행해보기로 했다.
tsx파일에 css파일을 import했는데,
'./App.module.css' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.
바로 에러가 떠버렸다!
타입에러도 아냐!
찾아보니 해당 에러는 typescript가 css파일을 모듈로 인식하지 못해서 발생하는 문제로 짐작되었다.
해결 방법으로는 css 파일이 모듈 형식임을 선언해주면 해결할 수 있었다.
선언 방법으로는
scr폴더 내에 global.d.ts파일을 생성해
declare module "*.css" {
const content: { [className: string]: string };
export = content;
}해당 내용을 작성해 주었더니 해결되었다!
해결을 하고 나니 global.d.ts파일의 용도가 궁금해졌고,
타입스크립트 딥다이브 문서에서 해당 내용을 확인 할 수 있었다!
요약하자면 .d.ts 파일은 타입스크립트 선언 파일으로, 타입스크립트 코드의 타입 추론을 돕는 파일이라고 한다. 직접 만들어서 사용할 수도 있고, 이미 존재해 있는 파일을 가져다 사용할 수도 있었다.
@types/styled-components를 다운받았을 때 기존의 styled-components를 제거하고 받았더니 작동이 되지 않아 원인을 찾아보던 중 @types로 받은 것은 타입스크립트로 적용하기 위한 파일만 다운 받는 것이라고 기존의 styled-components는 설치되어있어야 사용할수 있다는 것을 본 적이 있었는데, 이제보니 @types를 붙여 설치하는 파일들이 다 타입 선언만 포함한 모듈을 받아온 것이었다!!
또한 모든 ts파일은 어떤 선언이든 export 키워드를 통해 import하여 다른 파일에서 사용할 수 있지만 구현이 없는 선언은 d.ts파일에 선언한다고 한다!
참고
https://velog.io/@drrobot409/React-TypeScript-module.scss-import
https://joshua1988.github.io/ts/usage/declaration.html
https://spookyjelly.tistory.com/39
