모듈 내보내기 및 가져오기 (import, export)

타입스크립트에서는 .ts 파일을 모듈이라고 한다.

단일 타입스크립트 파일 하나로 프로젝트를 구현해도 되지만, 기능이 다양하고 많은 경우에는

한 파일로 관리하기에 코드 관리 및 유지 보수 등 관리 측면에서 효율성이 좋지 않다.

 

이를 위해서 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할하는 '모듈화(modulization)' 라는 작업을 하는데

타입스크립트에서는 import 및 export를 사용하여 모듈화를 할 수 있다.

 

hello.ts

const hello = function() { // 보낼 키워드 앞에 export 키워드를 작성한다.
	console.log("안녕하세요")
}

const bye = function() {
	console.log("안녕히 가세요")
}

 

이 hello.ts 라는 파일을 index.ts에서 사용하고 싶은 경우

// hello.ts
export const hello = function() { // 보낼 키워드 앞에 export 키워드를 작성한다.
	console.log("안녕하세요")
}

export const bye = function() {
	console.log("안녕히 가세요")
}

// index.ts
import { hello, bye } from './hello'
hello()
// 안녕하세요
bye()
// 안녕히 가세요

 

export default 키워드를 사용하면 import를 받을 때, {} 없이 받을 수 있다.

// hello.ts
export default const hello = function() {
	console.log("안녕하세요")
}

// index.ts
import hello from './hello'
hello()
// 안녕하세요

 

export default는 모듈에서 export 할 대상이 하나 뿐일 때, 사용하면 된다.

 

또한, import * as /*  namespace */ from ~ 을 이용해서 별칭을 줄 수도 있다.

// hello.ts
export const hello = function() { // 보낼 키워드 앞에 export 키워드를 작성한다.
	console.log("안녕하세요")
}

export const bye = function() {
	console.log("안녕히 가세요")
}

// index.ts
import * as NS from './hello'
NS.hello()
// 안녕하세요
NS.bye()
// 안녕히 가세요