TypeScript Guidebook
  • TypeScript 가이드북
  • 소개
    • TypeScript를 사용하는 이유
  • 환경 구성 / CLI
    • 컴파일 설정
    • 린팅
    • IDE / 에디터
    • Google TypeScript Style
    • TSDX
  • 타입
    • primitive 타입
    • any 타입
    • array 타입
    • tuple 타입
    • enum 타입
    • function / union / void 타입
    • object 타입
    • null / undefined 타입
    • never 타입
    • 사용자 정의 타입
    • 타입 어설션
  • TS vs ES6
    • 블록 영역 변수, 상수 선언
    • 템플릿 리터럴
    • 화살표 함수
    • 전개 연산자 / 매개변수
    • 비구조화 할당
  • 클래스
    • 속성 with 접근 제어자
    • 메서드 with 접근 제어자
    • 상속
    • 게터 / 세터
    • 스태틱 속성, 메서드
    • 추상 클래스
    • 싱글턴
    • 읽기전용 속성
  • 네임스페이스와 모듈
    • 네임스페이스
    • 네임스페이스 멀티 파일
    • 네임스페이스 중첩
    • 모듈
    • 모듈 번들링
  • 인터페이스
    • 인터페이스와 클래스
    • 인터페이스와 매개변수
    • 인터페이스와 객체 리터럴
    • 인터페이스 옵션 속성
    • 인터페이스 읽기 전용 속성
    • 인덱스 시그니처 속성
    • 인터페이스와 함수타입
    • 인터페이스 확장
  • 제네릭
    • 제네릭과 클래스
    • 제네릭과 함수
    • 멀티 타입 설정
    • 타입 변수 상속
  • 데코레이터
    • 데코레이터 / 팩토리
    • 데코레이터 구성
    • 클래스 데코레이터
    • 메서드 데코레이터
    • 접근 제어자 데코레이터
    • 속성 데코레이터
    • 매개변수 데코레이터
Powered by GitBook
On this page
  • 중첩된 네임스페이스
  • 중첩된 네임스페이스 별칭
  • 실습
  • 참고
  1. 네임스페이스와 모듈

네임스페이스 중첩

중첩된 네임스페이스

네임스페이스 내부에 네임스페이스를 선언할 수 있고 공개(export) 할 수도 있습니다. 즉, 중첩된(nested) 네임스페이스를 활용할 수 있습니다. 작성 방법은 다음과 같습니다.

Dom.ts
namespace Dom {

  // 중첩된 Events 네임스페이스
  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);
    }
  }

}

중첩된 네임스페이스 별칭

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

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

let body = Dom.el('body');

Events.on(body, 'click', function(e) {
  this.classList.toggle('clicked');
});

컴파일된 JavaScript 코드를 살펴보면 중첩된 IIFE 패턴이 사용된 것을 확인할 수 있습니다.

컴파일 코드:

JavaScript
var Dom;
(function (Dom) {
  // 중첩된 Events 네임스페이스
  var Events;
  (function (Events) {
    function on(el, type, handler, is_capture) {
      if (is_capture === void 0) { is_capture = false; }
      el.addEventListener(type, handler, is_capture);
    }
    Events.on = on;
    function off(el, type, handler, is_capture) {
      if (is_capture === void 0) { is_capture = false; }
      el.removeEventListener(type, handler, is_capture);
    }
    Events.off = off;
  })(Events = Dom.Events || (Dom.Events = {}));
})(Dom || (Dom = {}));

실습

참고

Previous네임스페이스 멀티 파일Next모듈

Last updated 6 years ago

중첩된 네임스페이스에 접근하기 위해 코드가 길어진다면 별칭()를 만들어 사용할 수도 있습니다. 네임스페이스 별칭을 만들 때 import 키워드를 사용합니다. 아래 코드를 참고하세요.

Alias
Documentation - Namespacestypescriptlang
TypeScript - 별칭
Logo