[Typescript] 네임스페이스 ts / 타입스크립트 모듈 import export

모듈(module)

모듈이란, 서로 연관있는 데이터나 함수를 하나로 묶은 단위이다.
모듈은 코드와 선언 둘 다 포함될 수 있으며, 재사용성, 고립성, 번들링을 위해 사용된다.
모듈을 사용하게되면 다른 파일에서 선언한 것들을 가져와 사용할 수 있다.

ts 파일을 하나 만들고, 변수선언을 해주면 아래와 같은 에러가 발생한다 ex) test1.ts

cannot be compiled under '--isolatedModules' because it is considered a global script file.
Add an import, export, or an empty 'export {}' statement to make it a module.

test1.ts 파일을 모듈로 만들려면 import, export 를 사용하거나 empty{}를 적어줘야 한다.
그래야 이 파일을 모듈로 인식한다.

const test = [1,2,3]
export {} // 내보낼건 없지만 이 파일은 모듈이다

import {ProductType} from "../productTypes" // 다른곳에서 가져올때 import 키워드 사용
const test = [1,2,3]

export const test = [1,2,3] // 다른곳에서 쓸때(다른곳으로 내보낼때) export 키워드 사용

 

네임스페이스(namespace)

타입스크립트에는 내부모듈과 외부모듈이 있는데, 그중 내부모듈에 해당하는 것이 네임스페이스다. (옛날에는 내부모듈이라고 불렀다)
export import로 내보내거나 가져온 모듈들은 모두 외부모듈이라고 보면 된다.

네임스페이스를 사용하는 가장 큰 목적은 구조의 논리적 그룹을 명확히 선언하여 이름의 중복을 방지하기 위함이다.
서로다른 파일에서 같은 namespace를 공유할 수 있다.

// User.ts
namespace Utils{
    export interface isIdNumber{
		isIdNumber(id:any):boolean	
    }
}

// Product.ts
namespace Utils {
   export const onlyNumberWithSymbol = (str: any) => {
  return str.replace(/[^0-9. +]/g, "").replace(/(\.*)\./g, "$1");
};
}

 

네임스페이스 사용하기

네임스페이스는 Typescript만의 고유 방법이며, 여러개의 파일을 포괄할 수 있다.
여러개의 파일을 포괄하려면 가져올때 reference 를 통해 가져온다.

// Test.ts
<reference path="test1.ts" />
<reference path="test2.ts" />
<reference path="test3.ts" />

이때, 모든 입력 파일을 하나의 JavaScript 출력 파일로 컴파일하기 위해 --outFile 플래그를 사용하여 연결 출력(concatenated output)을 사용해야한다.

tsc --outFile Test.ts

그러면 컴파일러는 파일에 있는 참조 태그를 기반으로 출력 파일을 자동으로 정렬한다.

 

각 파일을 개별적으로 지정할 수도 있다.

tsc --outFile test1.ts test2.ts test3.ts Test.ts

또는 파일별 컴파일(기본값)을 사용하여 각 입력 파일에 대해 하나의 JavaScript 파일을 생성할 수 있다.
여러 개의 JS 파일이 생성되는 경우, 웹 페이지에서 <script> 태그를 사용하여 각 파일을 적절한 순서로 로드해야 한다.

<script src="Test.js" type="text/javascript" />
<script src="test1.js" type="text/javascript" />
<script src="test2.js" type="text/javascript" />
<script src="test3.js" type="text/javascript" />

(예제는 ts인데 경로 파일명은 왜 js지?? => js로 컴파일 되었기 때문이다)

 

네임스페이스랑 ES Module 중 뭘 써야 할까?

Typescript 공식문서를 보면, Node.js 애플리케이션의 경우 모듈이 기본값이며 최신 코드에서 네임스페이스보다 모듈을 권장한다는 점도 주목할 필요가 있다고 적혀있다. 또한, 새로 만드는 프로젝트는 Module을 권장한다.

모듈을 쓰자.