#3. 타입스크립트 임포트, 익스포트(Typescript import export)

 

타입스크립트에서의 import 기능과 export 기능은 Javascript에서의 기능과 거의 비슷 합니다.

먼저 외부로 보내고자 하는 기능은 아래처럼 export 명령어를 통해 가능 합니다.

function select(calback?: Function) { }

function insert(param: DBform, calback?: Function) { }

function update(param: DBform, calback?: Function) { }

function remove(param: DBform, calback?: Function) { }

export { select, insert, update, remove};

 

이러한 함수가 존재한다고 가정하여 봅니다.

export 명령어에 외부에서 사용할 수 있도록 중괄호에 필요한 함수를 선언하면 됩니다.

이를 가져올 때는 아래처럼 쉽게 가져올 수 있습니다.

import { select, insert, update, remove } from "파일위치";

//아니면 아래처럼 별칭을 준 뒤에 가져올 수 있습니다.
import * as all from "파일위치";
all.select
all.insert
all.update
all.remove

 

그런데 간혹 이러한 import에서 오류를 보이거나 잘 안되는 경우가 있습니다.

"모듈에 기본 내보내기가 없습니다."

바로 default 명령어가 붙은 export인 경우입니다.

function select(calback?: Function) { }

function insert(param: DBform, calback?: Function) { }

function update(param: DBform, calback?: Function) { }

function remove(param: DBform, calback?: Function) { }

export default { select, insert, update, remove};

 

내보내는 곳 에서 default를 붙여주면 import하는 형식은 아래처럼 바뀌어야 합니다.

맨 위에서 한 것 처럼 중괄호로 import를 여러개 할 수 없습니다.

//요런식으로 하나하나 import를 합니다.
import select from "파일위치";
import insert from "파일위치";
import update from "파일위치";
import remove from "파일위치";

//아니면 아래처럼 별칭을 준 뒤에 가져올 수 있습니다.
import * as all from "파일위치";
all.default.select
all.default.insert
all.default.update
all.default.remove

 

아래는 export default와 단순한 export를 사용하는 경우 입니다.

많은 라이브러리들이 아래처럼 구성되어 있습니다.

function select(calback?: Function) { }

function insert(param: DBform, calback?: Function) { }

function update(param: DBform, calback?: Function) { }

function remove(param: DBform, calback?: Function) { }

export default select
export {insert, update, remove};

 

이러한 방식으로 export 된 함수는 아래처럼 가져옵니다.

select 함수는 default이므로 중괄호에 포함되지 않고 가져오도록 작성 하여야 합니다.

import select, { insert, update, remove } from "파일위치";

 

클래스와 인터페이스와 마찬가지로 타입도 export 할 수 있습니다.

타입(type)을 export 하는 경우에는 export 뒤에 type을 적어주어야 합니다.

type DBform = {
  IDX?: number;
  NAME: string;
  DESC: string;
  DATE: string;
};
export type { DBform };  //export 뒤에 type을 붙여 줍니다.

 

이를 가져올 때는 기존에 하던 것 처럼 가져오면 됩니다.

import { DBform } from "대상파일";

 

이상으로 타입스크립트에서 임포트, 익스포트 사용 방법에 대해서 간단하게 적어보았습니다.

틀린부분 또는 궁금한 점은 언제든지 연락주세요! 👻