[TypeScript] import export

만든 타입변수를 다른 파일에서 사용하고 싶은 겨우 자바스크립트 import export 문법 그대로 사용가능하다. 타입스크립트에서의 import export문법을 알아보기전에 자바스크립트의 import export사용법을 간단하게 알아보자.

⭐ JavaScript에서의 import export

• export문은 JS모듈에서 변수, 함수, 클래스를 내보낼 때 사용하고 다른 파일에서 내보낸 값을 import문으로 가져올 수 있다.

⚡ export 사용법

• 변수, 함수, 클래스 선언할 때, export를 붙이면 내보내짐
  item.js

export let dog =['보스','초코','호두'];
export const age = 25;
export class Aimal{
// ...
}

❗ 대부분의 자바스크립트 style guide에서 클래스, 함수 선언부 앞에 export를 붙여 내보내기 시에, 선언 끝에 세미콜론 붙이지 말라고 권유

⚡ import 사용법

index.js

import age from './item.js';
let student_age=age;

❗ import할 모듈이 모두 사용할 경우가 아니라면, 사용할 항목만 불러오는게 좋음

⭐ TypeScript에서의 import export

• export해서 import하기
  a.ts

// export 변수나 함수 정의
export let name = 'gyu';
export let age = 25;

b.ts

// import {변수명} from 파일경로 
import {name, age} from './a.ts'
console.log(age) // output: 25 

• 변수를 다른 파일에서 쓰고싶으면 export문법으로 내보낸다.
• export된 변수를 가져와서 쓰고 싶으면 import 문법으로 가져와야한다.

⚡ 해당 파일의 모든 변수를 불러오고 싶을 때

import * from './a.ts';
console.log(name);
console.log(age);

./a.ts파일에서 export된 모든 변수를 import해오는 문법이다.

⚡ 정의된 타입을 가져오고 싶을 때

a.ts

export type Name = string | boolean;
export type Age = (a :number) => number;

b.ts

import {Name, Age} from './a.ts'
let 이름 :Name = 'kim';
let 함수 :Age = (a) => { return a + 10 }