命名空间及模块

关于术语的一点说明: 请务必注意一点，TypeScript 1.5里术语名已经发生了变化。 “内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块”，这是为了与 ECMAScript 2015里的术语保持一致，(也就是说 module X { 相当于现在推荐的写法 namespace X {)。

• 模块
  作用: 一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来，typeScript 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量(同 es6 一致)
  • 变量导出

    export const config = { ip: '127.0.0.1', port: 8081 }
    

  • 聚合导出

    const ip = '127.0.0.1'
    const port = 8081
    export { ip, port }
    

  • 重命名导出

    const ip = '127.0.0.1'
    export { ip as oirgin }
    

  • 接口, 类, 函数导出

    export interface Staff {
      name: string
      age: number
    }
    export class global {}
    export function main() {}
    

  • 默认导出

    const ip = '127.0.0.1'
    export default ip
    

  • 导入

    // 默认导入
    import ip from './module' 
    // 按需导入
    import { ip } from './module' 
    // 混合导入
    import ip, { port } from './module' 
    // 重命名导出
    import { ip as origin } from './module' 
    

  • 动态引入

    import 大多数都是作为静态引入使用的，但是有时也可以作为方法使用，动态引入内容，默认返回 promise，ES2020提案 引入import()函数，支持动态加载模块。

   const isProduction = true
   if (isProduction) {
     import('./modules').then(res => {
       const { ip, port } = res
     }
   }
  

• 命名空间
  命名空间是模块话之前的产物, 有了模块话命名空间就显得有点多余, 但也不是说完全没用, 模块化实际声明的是整个文件, 命名空间是文件下又定义一个小空间, 为了更好理解,你可以把它当成一个对象

  // a.ts
  namespace config {
    export const ip = '127.0.0.1'
    export const port = 8081
  }
  console.log(config.ip) //  '127.0.0.1'
  // b.ts
  /// <reference path="./a.ts" />
  console.log(config) // ReferenceError: config is not defined
  // 程序不能立刻执行，否则会报错，因为要确保所有编译后的代码都被加载了，所以需要把所有的输入文件编译为一个输出文件，使用 --outFile 实现：
  // tsc --outFile ${编译后文件名} ${需要编译的文件}
  

为了避免以上错误,我们可以直接使用 export 导出命名空间, 使用 import 导入