Table of contents
자바스크립트는 코드 모듈화 방법에 대한 긴 역사를 가지고 있다.
타입스크립트는 2012년 부터 이러한 모듈화 방법의 지원을 구현해왔다.
하지만 시간이 지남에 따라 커뮤니티와 자바스크립트 표준 명세는 ES Modules라는 방식으로 수렴되어왔다.
이 방식은 당신이 import/export 문법으로 알고 있는 바로 그것이다.
ES Modules는 2015년에 자바스크립트 명세에 추가되었다. 그리고 2020년 까지 대부분의 웹 브라우저와 자바스크립트 런타임에서 광범위하게 지원되고 있다.
선택과 집중을 위해, 이 핸드북에서는 ES Modules와 그와 못지 않게 인기있는 선행 방식인 CommonJS를 다룰 것이다. (이 CommonJS는 module.exports = 문법으로 대표되는 방식이다)
기타 다른 모듈 패턴에 대한 정보는 레퍼런스 섹션의 Modules 부분을 참고하도록 하자.
ECMAScript 2015와 마찬가지로 타입스크립트 내에서도 탑레벨 import 혹은 export를 포함하는 모든 파일은 모듈로 간주된다.
거꾸로 말하면, 탑레벨 import 혹은 export 선언이 없는 파일은 그 내용이 글로벌 스코프에서 사용 가능한(따라서 모듈에서도 사용 가능한) 일반 스크립트로 다뤄진다.
모듈은 그 자신의 스코프 내에서는 실행될 수 있지만 글로벌 스코프에서는 실행될 수 없다.
이는 모듈에서 정의된 변수와 함수, 클래스 기타 등등은 명시적으로 export 문법으로 내보내지 않는 한, 모듈 바깥에서 가시적이지 않다는 것을 의미한다.
반대로 이야기하면, 다른 모듈로부터 내보내진 변수, 함수, 클래스, 인터페이스 등등을 사용하려면, import 문법으로 불러들여야 한다는 의미다.
시작하기 전에, 타입스크립트가 모듈로 간주하는 것이 무엇인지를 이해하는 것이 중요하다.
자바스크립트 명세는 export 혹은 탑레벨 await가 없는 자바스크립트 파일은 스크립트로 간주되어야 하며, 모듈이 아니라고 선언하고 있다.
스크립트 파일 내에서 변수와 타입은 공유된 글로벌 스코프에 존재하도록 선언된다.
또한 스크립트 파일로 간주될 경우, 다중의 입력 파일을 하나의 아웃풋 파일로 결합시키기 위해 --outFile 컴파일러 옵션을 사용하거나, 여러 개의 스크립트 파일을 불러들이기 위해 HTML 파일에 다중의 <script> 태그를 사용할 것이라고 간주된다.
만약 당신의 파일이 현재 import나 export를 갖고 있지 않지만, 모듈로 다뤄지길 바란다면 아래와 같은 한 줄을 추가하자.
export {};
이 한 줄은 아무것도 없는 모듈을 내보내는 코드다. 이 문법은 설정의 모듈 타겟과 관계 없이 동작한다.
타입스크립트에서 모듈 기반 코드를 작성할 때 고려해야 할 세 가지 주요한 부분이 있다.