【十月打卡】第59天 TypeScript(15)-原创手记-慕课网

命名空间 namespace

namespace

作用：防止暴露过多的全局变量，导致代码不可维护
将需要暴露的模块通过export来导出

namespace基本示例

index.ts

namespace Home {
  class Header {
    constructor() {
      console.log('Header');
    }
  }

  class Content {
    constructor() {
      console.log('Content');
    }
  }

  class Footer {
    constructor() {
      console.log('Footer');
    }
  }

  // 需要export才能在Home下调用
  export class Page {  
    constructor() {
      new Header();
      new Content();
      new Footer();
    }
  }
}

调用方式：

<!DOCTYPE html>
.....
<script src="./dist/index.js"></script>
<script>
  new Home.Page()
</script>
</html>

命名空间嵌套

namespace Parent {
  export namespace Child {
    export class Header {
      constructor() {
        console.log('Header');
      }
    }
  }
}

调用方式： new Parent.Child.Header()

命名空间引用

命名空间引用基本使用

// components.ts
namespace Components {
  export class Content {
    constructor() {
      console.log('这是公共组件');
    }
  }
}


// index.ts
/// <reference path="./components.ts" />
namespace Home {
  export class Page {
    constructor() {
      new Components.Content();
      console.log('Page');
    }
  }
}

修改tsconfig.json
如果要把编译生成的index.js和components.js文件都打包到index.js一个文件中，
需要修改tsconfig.json的配置：

    "outFile": "./dist/index.js",
    "module": "amd",

<reference path="./components.ts" /> 只是标明引用关系，并不会对代码编译运行产生影响

命名空间还可以导出类型声明

// components.ts
namespace Components {
  export interface User {
    name: string;
  }
}

// index.ts
/// <reference path="./components.ts" />
namespace Home {
  export class Page {
    user: Components.User = { name: 'tz' };
    constructor() {}
  }
}