[TypeScript] import / export 문법 및 namespace

 

다른 파일에 정의한 데이터, 타입 등을 가져올 때 TypeScript 1.5버전 이전에는 namespace 문법을 사용해왔지만

TypeScript 1.5버전 이상에서는 JavaScript에서 제공하는 import / export 문법을 그대로 사용가능하다.

 

그래서 import / export 문법을 사용해서 다른 ts파일에 타입 변수를 정의하고 사용도 가능하다.

 

사용방법

1.  타입 변수를 정의할 ts 파일 생성 (예 : a.ts)

2. 전달할 변수에 export 선언

3. 전달받을 ts파일에서 import로 선언 ( 예 : import {변수명} from 파일경로 )

 

//data.ts
export type Name = string;
export type Price = number;
export type Car_Serach = (name : string , price : number) => string|number; 

//car.ts
// import 시 변수명을 하나 씩 선언하는게 번거로우면 *를 사용 (import * from './data')
import {Name, Price, Car_Serach } from './data'

// 함수에 적용 
let Serach : Car_Serach = (name, price) =>{return name +"의 가격은 " + price + " 입니다."}
console.log(Serach('ev9',10000));

 

 

TypeScript 1.5버전 이전에는 import/export 문법이 존재하지 않아 <script src="">  형태로 파일들을 첨부해서

사용하였는데 이 방법의 문제점은 파일이 많아질 수록 변수명이 겹치는 위험이 있었다.

그래서 외부 파일에서 사용하지 않을 변수들을 함수로 감싸고 타입변수들의 경우 namespace 문법을 이용해 숨겼다.

 

사용을 위해서는  <reference/> 로 다른파일을 우선 import 해야한다.

//data.ts
namespace CarNamespace {
  export interface Car_type { name : string, color : string, tire : number};
  export type CompanyName = string;
} 

//car.ts
/// <reference path="./data.ts" />
let Car_info : CarNamespace.Car_type ={name: 'EV6', color: 'blue', tire : 19};
let Company_info : CarNamespace.CompanyName = 'KIA';

//namespace명.type명을 사용