[typescript] Namespace, ES6

Splitting code and module.

Namespace

• Typescript feature

Syntax

project.ts

// Split code
namespace App { // (*)
  export enum ProjectStatus {
    Active,
    Finished, 
  }

  export class Project {
    constructor(
      public id: string,
      public title: string
    ) {}
  }
  // ...
}

app.ts

// Import split codes (relative path)
/// <reference path="project.ts" /> // (*)
/// <reference path="../models/drag-drop-interfaces.ts" />

namespace App { // (**)
// ...All codes
}

tsconfig.json
Concatenate all namespaces into a single file.

• "module": "amd" (from commonjs)
• "outFile": "./dist/bundle.js"

index.html
import <script src="bundle.js" defer>

---

ES6 Module

• Import "file.js" not "file.ts". Because it imports compiled file.
• When you work with webpack, you can omit the file extension(js).

tsconfig.json

• "target": "es6"
• "module": "es2015"
• Comment "outFile": "./dist/bundle.js"

index.html
import <script type="module" src="dist/app.js"></script>