Module

namespace & <reference />

// models/drag-drop.ts
namespace App {
    export interface Draggable {
        handleDragStart(event: DragEvent): void;
        handleDragEnd(event: DragEvent): void;
    }
    
    export interface Droppable {
        handleDragOver(event: DragEvent): void;
        handleDrop(event: DragEvent): void;
        handleDragLeave(event: DragEvent): void;
    }
}

// models/project.ts
namespace App {
    export type ProjectStatus = 'active' | 'finished'

    export class Project {
        constructor(
            public id: string,
            public title: string,
            public description: string,
            public people: number,
            public status: ProjectStatus,
        ) {
        }
    }
}

// app.ts
/// <reference path="models/drag-drop.ts"/>
/// <reference path="models/project.ts"/>
namespace App {
  class ProjectItem implements Draggable { // we can use Draggable! 
    // ...
  }
  class ProjectList implements Droppable { 
    // ...
  }
}

 

1. namespace 키워드를 사용하면, 해당 키워드의 아래(below)에 작성된 코드를 모듈화하고, export 할 수 있다.
   • drag-drop.ts 파일에서 App이라는 namespace를 정의하면, 내부의 코드를 모듈화할 수 있다. 
   • drag-drop.ts 파일을 import 하기만 하면, namespace App { ... }에서 drag-drop에 정의된 App namespace 내부에 접근할 수 있다. 
2. namespace로 모듈화된 코드는 reference 구문을 통해 import 된다. 
   •  /// <reference path="models/drag-drop.ts"/>  | 3개의 slash와 reference 구문을 이용해서 해당 파일을 import할 수 있다.  
3. tsconfig 
   • 여러 개의 파일로 분할된 ts는 각각의 js 파일로 컴파일 된다.
   • 이 때 reference 구문은 js에서 지원하지 않는 ts 만의 기능으로, 해당 코드는 컴파일되면서 사라진다.
   • 즉, 컴파일된 js에서 모듈화된 파일에 접근 할 수 없으므로 런타임 에러가 발생한다. => 아래의 tsconfig 옵션을 이용해서 문제를 해결할 수 있다. 
   •  "outFile":"./dist/bundle.js",  "module":"amd" 
     • 모든 ts 파일들을 하나의 js로 묶는다(concatenate). 즉, dist/bundles.js 파일 하나로 묶는다.
     • 컴파일 시 bundle.js 만 생성되고, html에 이 파일을 import 한다.
     • amd | 여러 파일을 하나로 묶는 방법(bundlinig type) 중 하나를 말한다. 
4. 각 모듈에서 필요한 reference를 import 하지 않더라도, IDE 에러를 보여주지 않는다는 문제가 있다. 
   • ??? 어차피 bundle.js 파일에 모든 코드가 포함되어서 그런건가 

ESModule

// models/drag-drop.ts
export interface Draggable {
    handleDragStart(event: DragEvent): void;
    handleDragEnd(event: DragEvent): void;
}
    
export interface Droppable {
    handleDragOver(event: DragEvent): void;
    handleDrop(event: DragEvent): void;
    handleDragLeave(event: DragEvent): void;
}

// components/projectList.ts
import { Droppable } from '../models/drag-drop.js'; // not TS!!!
export class ProjectList implements Droppable {
  //...
}

 

<script type="module" src="dist/app.js" defer></script>

 

1. tsconfig
   •  "module": "es2015"
   •  "target": "es6" | target 버전이 es6 이상이어야 한다. 
   • outFile 옵션은 사용하지 않는다. 
2. <script />에서 type = "module" 속성
   • 브라우저가 src 파일 내부에 작성되어있는 import, export 구문을 분석/ 다운로드/ 실행할 수 있다.
   • 즉 import 하고 있는 모든 모듈에 대해서 http 요청을 보낸다(network 탭에서 확인 가능).
   • 모듈 js 파일을 요청하게 되면, 그 파일을 다운로드/실행하는 일 등에 시간(waterfall)이 든다.  
3. 같은 모듈을 여러 군데에서 import 하고 있다면, 그 모듈 파일을 import 할 때 마다 다운로드/ 실행 하는 것이 아니라, 최초에 한 번만 다운로드/ 실행된다(console logging을 통해 확인 가능).