Type Script 에서의 export , import 그리고 namespace

TypeScript에서 export, import, 그리고 namespace는 모듈화와 코드 조직화를 위해 사용되는 기능들이다.

먼저 Type Script의 export와 import에 대하여 알아보자.

 

현재 TypeScript는 ES6 모듈 시스템(export와 import) 을 따른다. 기본적으로 Java Script의 export, import와 똑같다.

export

export 키워드는 모듈에서 다른 모듈로 데이터를 내보내는 데 사용된다. 내보낼 수 있는 항목으로는 변수, 함수, 클래스 등이 있다.

 

mathUtils.ts

// 변수를 export
export const PI = 3.14;

// 함수를 export
export function calculateCircumference(diameter: number): number {
    return diameter * PI;
}

// 클래스를 export
export class Circle {
    constructor(public radius: number) {}
    
    getArea(): number {
        return PI * this.radius * this.radius;
    }
}

 

모듈에서 다른 모듈로 데이터를 내보낼 때 사용한다.  함수, 변수, 클래스 등을 내보내서 다른 모듈에서 사용할 수 있도록 한다.

import

import 키워드는 다른 모듈에서 내보낸 데이터를 가져오는 데 사용된다.

 

app.ts

import { PI, calculateCircumference, Circle } from './mathUtils';

console.log(`Value of PI: ${PI}`);
console.log(`Circumference: ${calculateCircumference(10)}`);

const myCircle = new Circle(5);
console.log(`Area of Circle: ${myCircle.getArea()}`);

 

다른 모듈에서 데이터를 가져와 사용할 때 사용한다.

 

import를 통해 가져온 데이터는 모듈 간의 의존성을 관리하고 코드의 재사용성을 높이는 데 기여한다.

 

그러나, Java Script 와의 차이점은 Type Script는 타입 또한 export와 import 해 줄 수 있다는 점이다.

( interface 또한 export 할 수 있다. )

export

export type Age = number;

export interface lsiron {}

export let age = 28;

import

import {Age, lsiron, age} from 'export경로'

let age:Age = 28;

 

이제 namespace에 대하여 알아보자.

namespace

namespace 방식은 관련된 코드 조각을 하나의 논리적 그룹으로 묶고 싶을 때 사용한다.

 

특히, 전역 네임스페이스 오염을 방지하고, 큰 코드베이스에서 유사한 기능을 가진 코드 그룹을 만들 때 유용하다.

 

namespace는 ES6 모듈 시스템이 나오기 전에 자주 사용되었으나, 현재는 ES6 모듈 시스템이 사용된다. 

 

index.ts

...

///<reference path="app.ts">

 

html에서 외부 파일을 사용할 때 자주 보던 방식이다. 위와 같은 방식이 바로 ES6 모듈 시스템이 나오기 전에 사용하던 import 방식이다.

 

허나, 위 방식은 파일의 모든 코드를 가져오기 때문에  import를 적용한 파일에서 import한 파일과 변수명이 중복될 수 있다. 

이 당시에 타입변수의 중복을 막기위해 타입변수를 컨트롤 한 방법은 Object 자료안에 타입변수를 숨기는 방법이였다. 

 

이 때 Object에 숨기면서 사용한 것이 바로 namespace이다.

namespace Lsiron {
    export type Name = string | number;
}

let siron: Lsiron.Name = 'iron'; // 숨겨둔 타입변수 사용방법

namespace ron {
    export type Name = string | number;
}

let on: ron.Name = 'n'; // 타입명이 중복되어도 에러가 발생하지 않음

 

위 방식이 바로 namespace를 사용하여 타입명을 감추는 작업인데 위 예시처럼 타입변수명이 중복되더라도 에러가 발생하지 않는다.

 

이 말은 즉, 위 예시를 다른 파일에서 import 하여 사용하더라도 import를 적용한 파일에 있는 Name 타입변수와 예시에서 namespace를 적용한 Name 타입변수가 서로 겹치는 에러가 발생하지 않는다.

 

그러나 현대 TypeScript 코드베이스에서는 ES6 모듈 시스템을 사용하기 때문에 namespace가 필요 없어졌지만 옛날 파일을 찾아볼 때 해석하기 위해 알아두어야 한다.

 

참고로 더 옛날에는 namespace 를 사용하지 않고 module 을 사용하였다.

module Lsiron {
    export type Name = string | number;
}

let siron: Lsiron.Name = 'iron'; // 숨겨둔 타입변수 사용방법

module ron {
    export type Name = string | number;
}

let on: ron.Name = 'n'; // 타입명이 중복되어도 에러가 발생하지 않음

 

 

참조 : 코딩애플