typescript(3) - 모듈 , 네임스페이스

🌈 네임스페이스란?

- 내부 모듈

- 타입스크립트만의 특유한 모듈 방법으로써 전역 이름 공간과 분리된 네임스페이스 단위의 이름공간을 뜻한다.

- 클래스나 인터페이스, 각종 함수 같은 내용을 한 파일에서 그룹화하여 관리 할 수 있게 해주는 개념임

🌱 형식

namespace 네임스페이스이름 {
   
   const 변수이름
   
   export function {
   
   }
}

 

 

🖋  예시

// 내부에서 선언한 DOM 이라는 모듈 (네임스페이스)
namespace Dom {
   // 외부에서 접근 불가
   const variable = 123;

   // 외부에서 접근 가능하도록 export
   export function add(arg1: number, arg2: number): number {
      return arg1 + arg2;
   }

   // export 하지 않은 네임스페이스 내부에 정의된 함수는 외부에서 접근 불가
   function subtract(arg1: number, arg2: number): number {
      return arg1 - arg2;
   }
}

Dom.add(1,2); // 3

 

 

📚 네임스페이스 멀티 파일 

- 네임스페이스 코드를 단 하나의 파일에서 관리할 필요는 없다.

 

A.ts 파일 정의

namespace Dom {
    //외부에서 접근 불가
    const variable =123;
    
    // 외부에서 접근 가능하도록 export 해주기
    export function add(arg1 : number, arg2 : number) : number {
        return arg1 + arg2;
    }  
    
)

 

 

🖋 B.ts 파일 정의

namespace Dom{
   export function sub(arg1: number1, arg2:number) : number {
      return arg1 - arg2;
   }
}

 

- 이때, A와 B를 같이 쓰기 위해서, (임포트해오기 위해서)

/// <reference path = "./A.ts"/>
/// <reference path = "./B.ts" />

Dom.add(1,2); //3이 출력됩니다. 
Dom.sub(1,2); //-1이 출력됩니다.

다음과 같이 작성이 가능하다. 

 

🖋 임포트 형식

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

 

 

- 비록 파일이 다르더라도, 프로젝트 내에서 같은 네임스페이스 내에서는 이름을 중복해 클래스, 함수, 변수 등을 선언하면 오류가 난다.

- 네임스페이스가 다르다면 변수 이름이 같아도 이름 충돌이 없다.

 

 

네임스페이스 중첩

- 네임스페이스 내부에 네임스페이스를 선언할 수 있고 공개(export) 할 수도 있습니다.

- 네임스페이스 안에 네임스페이스를 만드는 것을 중첩이라고 한다. 

 

예시

Dom.ts

namespace Dom {

  // 중첩된 Events 네임스페이스 : 공개된 네임스페이스임(exports)
  export namespace Events {
    export function on(
      el         : Element|Document,
      type       : string,
      handler    : (e:Event)=>void,
      is_capture : boolean = false
    ):void {
      el.addEventListener(type, handler, is_capture);
    }

    export function off(
      el         : Element|Document,
      type       : string,
      handler    : (e:Event)=>void,
      is_capture : boolean = false
    ):void {
      el.removeEventListener(type, handler, is_capture);
    }
  }

}

 

Aliasing

- 중첩된 네임스페이스에 접근하기 위해 코드가 길어진다면 별칭을 만들어 사용할 수 있다. 

- 네임스페이스의 별칭을 만들 때에는 import를 사용한다. 

 

형식 

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

// Dom.Events 네임스페이스를 import 하여 Events 변수에 참조
import Events = Dom.Events;

 

 

🌈 모듈 

- 파일 자체 범위 내에서 실행되며, 모듈 내 선언된 변수, 함수, 클래스 등을 명시적으로 내보내지 않으면 모듈 외부에서 접근하는 것이 불가능하다. (위의 네임스페이스와 똑같음)

 

📚 모듈 내보내기 

- 내보내고자 하는 변수, 함수, 클래스 앞에 export를 붙이면 된다. 

export function on(
  el         : Element|Document,
  type       : string,
  handler    : (e:Event)=>void,
  is_capture : boolean = false
):void {
  el.addEventListener(type, handler, is_capture);
}

export function off(
  el         : Element|Document,
  type       : string,
  handler    : (e:Event)=>void,
  is_capture : boolean = false
):void {
  el.removeEventListener(type, handler, is_capture);
}

 

 

모듈 불러오기

- 외부 모듈을 불러와 사용하기 위해서 import 구문을 사용할 수 있다. 

- 비구조화 할당을 사용하여 위의 함수들을 불러온다. 

 

app.ts 

import { on, off } from './Dom/events';

on(document, 'click', (e) => document.body.style.background = '#912f03');

 

 

 

default 모듈 사용하기

- 모듈 내에서 내보낼 것들을 묶어서 기본으로 내보내기가 가능하다. 

 

Dom/selectors.ts

function el(selector:string, context:HTMLElement|Document = document): HTMLElement {
  return context.querySelector(selector);
}

function els(selector:string, context:HTMLElement|Document = document): NodeList {
  return context.querySelectorAll(selector);
}

export default { el, els };

 

default 모듈 불러오기 

- default로 내보내진 모듈은 import 구문에서 참조할 모듈 이름(변수명)으로 설정할 수 있다. 

import Dom from './Dom/selectors';
import { on, off } from './Dom/events';

on(document, 'click', (e) => Dom.el('body').style.background = '#912f03');