declare 키워드를 배웠으면 이제 d.ts 파일도 이해가 갈것이다. 코드를 짜다보면 어디선 d.ts파일이 등장한다. 이 파일은 타입만 저장할 수 있는 파일형식이다. (그래서 defintion의 약자인 d가 들어감) 그리고 js로 컴파일 되지 않는다.
그럼 어디에 사용하냐?
- 타입정의만 따로 저장해놓고 import 해서 사용하려고
- 프로젝트에서 사용하는 타입을 쭉 정이래놓을 레퍼런스용으로 사용
말그대로 타입정의 보관용 파일이다. 다른 ts파일에서 import해서 사용이 가능하다.
그런데 import할게 너무 많으면 namespace를 사용하던가 import*as 를 사용하면 된다! ts파일에 타입정의가 너무 길면 d.ts파일을 만들기도 한다.
가끔가다가 d.ts파일을 래퍼런스용으로 생성하기도 한다 . ts파일에 모든 타입을 정리해놓은 문서같은게 필요할때 d.ts파일을 사용하기도 한다.
그런데 이런걸 자동생성해주는 옵션도 있다. declaration 을 true로 설정하면 자동으로 생성된다.
d.ts가 자동생성되는경우 d.ts파일수정은 하면 안된다.
정리하자면
d.ts파일의 용도는
1. 타입정의 따로 보관할 파일이 필요하면
2. 타입 레퍼런스 생성하고 싶으면
그런데 d.ts파일은 자동으로 글로벌 모듈이 아니다 기존 ts파일처럼 모든 파일에서 사용할수있었는데 d.ts는 아니다. 한마디로 로컬 모듈이라고 생각하면 된다.
그럴때 d.ts파일 글로벌 모듈로 만들고 싶으면 tsconfig.json에 들어가서 typeRoots에 내가 원하는 폴더명을 넣어주고 그 폴더를 실제로 생성해주면 그 안에있는 타입들은 글로벌하게 이용이 가능하게 된다. 내가 원하는 폴더를 만들고 그안에 common 폴더를 생성하고 그 안에 d.ts안에 생성해주면 된다.
그러면 이렇게 글로벌 모듈로서 사용이 가능하다. 하지만 약간 위험성이 존재하기 때문에 되도록이면 import / export를 사용하도록 하자.
그리고 저번에도 말했듯이 외부라이브러리를 사용할때 타입정의가 안되어있으면 동작은 하지만 에러가 발생할것이다. 예를 들어 제이쿼리를 사용하면 ts에서는 오류가 발생하지만 실제 js에서는 동작은 할것이다. 상당히 거슬리는 부분인데 그럼 제이쿼리의 $를 타입정의를 해야한다.
그럴때 해당 사이트에 가보면 온갖 라이브러리의 타입을 정리해 두었는데 이것도 번거롭다면
공홈에서 찾아서 사용하면된다 d.ts파일을 받으면 된다 . 근데 보통 유명한 라이브러리들은 설치할때 대부분 타입도 함께 들어오는 경우도 있다. 만약 타입만 설치하고자 하면
npm i @type/jquery --save-dev 를 사용하면된다.
이렇게 설치하면 @types폴더가 생기는데 모든 타입파일들이 들어있다고 생각하면 된다. 이 폴더는 특별하게 우리가 코드를 구성할때 찾아보는 폴더중 하나이다. 즉 글로벌 모듈이다.
그런데 tsconfig.json에 typeRoots 설정을 했다면 자동으로 @types를 포함해주지 않으니 주의하도록 하자. 저 옵션을 지우던가 @types를 추가하던가 해야한다.
