본문 바로가기

JS/TypeScript

타입스크립트 튜토리얼 모듈

모듈은 타입스크립트로 작성된 코드를 구성하기 위한 아이디어로 설계되었다. 모듈은 내부 모듈, 외부 모듈로 나뉜다.


내부 모듈


클래스, 인터페이스, 함수를 하나의 단위로 논리적으로 그룹화하기 위해 쓰이고 다른 모듈로 export될 수 있다. 이 논리적 그룹핑은 타입스크립트의 최신 버전에서 네임스페이스라고 불린다. 그래서 내부 모듈은 구식이고 네임스페이스를 대신 쓸 수 있다. 내부 모듈은 여전히 지원되지만 네임스페이스를 쓰는 게 권장된다.


내부 모듈 문법 (old)

module TutorialPoint { 
   export function add(x, y) {  
      console.log(x+y); 
   } 
}


네임스페이스 문법 (new)

namespace TutorialPoint { 
   export function add(x, y) { console.log(x + y);} 
}


두 가지 모두 자바스크립트 컴파일되면 결과가 동일하다.

var TutorialPoint; 
(function (TutorialPoint) { 
   function add(x, y) { 
      console.log(x + y); 
   } 
   TutorialPoint.add = add; 
})(TutorialPoint || (TutorialPoint = {}));


외부 모듈


타입스크립트의 외부 모듈은 여러 외부 js 파일을 정의하기 위해서 그리고 종속성을 적재하기 위해서 존재한다. 단 하나의 js 파일이 쓰이면 외부 모듈은 관련이 없다. 전통적으로 js 파일 간의 종속성 관리는 브라우저 스크립트 태그 (<script> </script>)를 써서 수행되었다. 그러나 이것은 모듈을 로딩하는 동안 선형적으로 확장할 수 없다. 즉, 파일을 하나씩 로드하는 대신 모듈을 로드하기 위한 비동기 옵션이 없다. 서버를 위한 js 프로그래밍을 할 때, 예를 들어 node js에는 스크립트 태그가 없다.


단일 메인 자바스크립트 파일로부터 종속성 js 파일 로딩을 위한 두 가지 시나리오가 있다.

클라이언트 사이드 : RequireJS

서버 사이드 : NodeJS


모듈 로더 선택


외부 자바스크립트 파일 로딩을 지원하기 위해, 모듈 로더가 필요하다. 이건 다른 js 라이브러리이다. 브라우저에서 가장 흔하게 쓰이는 라이브러리는 RequireJS이다. 이것은 AMD(Asynchronous Module Definition) 명세를 구현한 것이다. 서로 의존적일지라도 하나 하나씩 파일을 로딩하는 대신, AMD는 모두를 각각 로드할 수 있다.


외부 모듈 정의





https://www.tutorialspoint.com/typescript/typescript_modules.htm