[TypeScript] declare module 에 대해 (feat. import, export )

모듈(module) 이란?

• import | export 가 있는 파일을 모듈이라고 한다.
• 외부에서 직접적으로 모듈을 불러오지 않으면 그 모듈의 데이터는 사용X
  1. import : 모듈에서 데이터를 불러올 때 사용
  2. export: 모듈에서 데이터를 내보낼 때 사용

[TypeScript] 컴파일 될 때 import, export 데이터의 행방

• 변수, 상수, 함수, 클래스: JS 모듈 로더 코드로 컴파일 된다.
• 타입: JS 코드로는 컴파일 되지 않음. ( JS 코드에서는 삭제 )  
• 네임스페이스: JS 일반 객체로 컴파일 된다. 

 

등장 배경

• 사용 빈도가 높은 라이브러리의 타입들은 @types/라이브러리를 통해 알 수 있다.
• 하지만 기능이 약한 라이브러리는 모듈 정의가 안되어 있는 경우가 많음
• 또한, 여러 문서에서 반복적으로 사용되는 타입을 매번 import 하기 번거로움
• 이를 위해 있는 것이 declare, *.d.ts 파일이다.

declare 키워드

• 변수, 상수, 함수, 클래스가 어딘가에 이미 선언 되어 있음을 알린다.
• TypeScript 컴파일러에게 타입 정보를 알리기만 한다. (Js 코드로 컴파일 되지 않음)
•  타입의 경우 어차피 JS 코드로 컴파일 되지 않으므로 declare 키워드를 사용하지 않아도 됨.
• declare 블록 ( declare namaspace , declare module, declare global ) 
  1. Ambient Context 로 정의되는 영역이다.
  2. 이 영역 안에서는 declare 키워드가 기본으로 붙으므로 굳이 또 붙여줄 필요 없다.
  3. 이 영역 안에서는 일반 코드 작성 X (선언 코드로 O)
  4. declare module "ABC" 
     • Ambient Module Declaration 파일에 작성하는 블록.
     • 외부 모듈 | 앰비언트 모듈로 불린다
     • 이러한 외부 모듈 선언 파일은 컴파일 대상에 포함된다면 그곳에 선언된 모듈의 타입 정보 참조 가능해짐
     • 물론 export를 붙이 필드만 외부에서 참조 가능
  5. declare namespace ABC 
     • 원래라면 JS 일반 객체로 컴파일되지만 declare 키워드로 인해 JS 코드로 컴파일 X
     • 몇몇 타입들을 의미적으로 묶고 싶을때 사용
     • 내부 모듈 | 앰비언트 네임스페이스 라고 불림
  6. declare global 
     • 모듈 파일에서도 전역 참조가 가능한 선언 코드를 작성할 떄 사용
     • declare module 블록안에서만 중첩이 가능.

.d.ts 파일 ( 선언 코드만 담긴 파일 ) 

• (구현x) 선언부만 작성하는 용도로 작성되는 파일
• JS 코드로 컴파일 X
• 이 파일에 작성되는 declare namespace 블록과 declare module 블록의 필드들에는 export 키워드가 기본으로 붙는다. 즉 굳이 또 붙여줄 필요가 없다.
•