# 네임스페이스 중첩

## 중첩된 네임스페이스 <a href="#namespace-nesting" id="namespace-nesting"></a>

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

{% code title="Dom.ts" %}

```typescript
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);
    }
  }

}
```

{% endcode %}

## 중첩된 네임스페이스 별칭 <a href="#namespace-alias" id="namespace-alias"></a>

**중첩된 네임스페이스에 접근하기 위해 코드가 길어진다면 별칭(**[**Alias**](http://www.typescriptlang.org/docs/handbook/namespaces.html#aliases)**)를 만들어 사용**할 수도 있습니다. 네임스페이스 별칭을 만들 때 **`import` 키워드를 사용**합니다. 아래 코드를 참고하세요.

{% code title="app.ts" %}

```typescript
/// <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');
});
```

{% endcode %}

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

**컴파일 코드:**

{% code title="JavaScript" %}

```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 = {}));
```

{% endcode %}

## 실습 <a href="#practice" id="practice"></a>

{% embed url="<https://stackblitz.com/edit/ts-namespace-nesting?embed=1&file=index.ts&view=editor>" %}

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://www.typescriptlang.org/docs/handbook/namespaces.html#aliases>" %}
TypeScript - 별칭
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/typescript/namespace-vs-module/nesting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.