Day24 Modules & Namespaces

今天要来介绍 Module，写 Module 的好处在於，可以把程序码分成不同档案来管理，会比较好维护，也能比较好阅读。
要把程序码写成模组有两种做法，一种是 Namespaces，一种是 ES6 的 imports/exports，今天先介绍 Namespaces，用前几天做的小专案来做练习。

把 interface 放在 namespace 里面，然後用 export 关键字把它们 export 出去这样不只在 namespace 里面可以使用，其他档案也能够使用。回到 app.ts 档案，要怎麽使用它们呢？

在 app.ts 里面加上 TS 的特殊语法：

/// <reference path="drag-drop-interfaces.ts" />

然後在 app.ts 里面设立一个跟拉出去的 interfaces 一样名称的 namespace，然後把所有的程序码都放在里面。

这时候会遇到一个问题，编译的时候没有错误，看似一切正常，可是当在浏览器要新增专案时却跑出一个 Uncaught TypeError，这是为甚麽呢？

因为 namespace 是 TypeScript 的功能，JavaScript 并不认识这个功能，所以在编译的时候不会有错是正常的，但是在编译的过程，TypeScript 把它们编译成不同的 .js 档了，也就是说，分割出去的各个 namespace 的程序码跟 app.ts 之间的连结，在编译成 JavaScript 的档案之後就消失无踪了。

解决这个问题的方法是设定 tsconfig.json 档：

"outFile": "./dist/bundle.js"

但是这样又会跑出一个问题，

但是这边先不深究 amd、system module 是什麽，把 tsconfig.json 的模组改成：

"module": "amd"

这时再编译一次的话就会看到所有的 .js 档变成一个 bundle.js 的档案了。

这样一来，我们的 drag & drop 专案就可以正常使用罗！

今天的 namespace 就暂且介绍到这边，这样可以把相同功能的程序码移到不同的 .ts 档，的确是在管理上方便了许多，之後会再介绍 ES module，谢谢阅读。：）