TypeScript中的命名空间使用

本篇文章将介绍TypeScript中命名空间的使用。

命名空间基础使用

使用namespace 定义命名空间，将需要暴露给外界访问的模块使用export 进行导出。

namespace Home {
  class Header {
    constructor() {
      const element = document.createElement('div')
      element.innerHTML = 'This is Header.'
      document.body.appendChild(element)
    }
  }
  class Content {
    constructor() {
      const element = document.createElement('div')
      element.innerHTML = 'This is Content.'
      document.body.appendChild(element)
    }
  }
  class Footer {
    constructor() {
      const element = document.createElement('div')
      element.innerHTML = 'This is Footer.'
      document.body.appendChild(element)
    }
  }
  // 使用export对外暴露给外界访问的模块资源(类)
  export class Page{
    constructor() {
      new Header()
      new Content()
      new Footer()
    }
  }
}

用tsc指令将ts文件编译成浏览器能够执行的js文件，然后在需要使用的地方导入编译好的js文件，就可以使用命名空间暴露的模块了。

使用命名空间的好处：

1. 提供类似模块化开发的方式
2. 尽可能少的声明全局变量参数
3. 把相关的内容封装到一起去，对外提供统一的暴露接口

命名空间的组合使用

创建components.ts,用于对外暴露基础组件。

namespace Components {
  export class Header {
    constructor() {
      const element = document.createElement('div')
      element.innerHTML = 'This is Components Header.'
      document.body.appendChild(element)
    }
  }
  export class Content {
    constructor() {
      const element = document.createElement('div')
      element.innerHTML = 'This is Content.'
      document.body.appendChild(element)
    }
  }
  export class Footer {
    constructor() {
      const element = document.createElement('div')
      element.innerHTML = 'This is Footer.'
      document.body.appendChild(element)
    }
  }
}

然后就可以在page.ts中引入components.ts提供的组建了。

namespace Home {
  
  // 使用export对外暴露给外界访问的模块资源(类)
  export class Page{
    constructor() {
      new Components.Header()
      new Components.Content()
      new Components.Footer()
    }
  }
}

为了使用page.ts提供的组件，需要同时引入page.js和components.js，为了减少这种引入方式，可以在tsconfig.json中配置所有ts文件导出到同一个文件中去。

tsconfig.json

"outFile": "./build/page.js", // 将所有ts文件编译到同一个文件中去 

然后就可以在html中只引入page.js就可以使用所有提供的组件了。

命名空间的依赖声明

为了解决命名组件之间相互引用的问题，可以使用依赖声明来代表要引入的另一个命名空间，这样就可以直观的看到命名空间的依赖关系了。

page.ts

/// 为引入components命名空间声明方式。

///

namespace Home {
  
  // 使用export对外暴露给外界访问的模块资源(类)
  export class Page{
    constructor() {
      new Components.Header()
      new Components.Content()
      new Components.Footer()
    }
  }
}

命名空间对外暴露interface

components.ts

namespace Components {
  export interface User {
    name:string
  }
}

如何使用命名空间对外提供的interface：

page.ts

namespace Home {
  export class Page{
    user: Components.User = {
      name:'李美丽'
    }
    constructor() {
      new Components.Header()
      new Components.Content()
      new Components.Footer()
    }
  }
}

定义子命名空间

在命名空间内部还可以再定义子命名空间，可以把这种子命名空间想象成java里面的内部类。

components.ts

namespace Components {
  export namespace SubComponents {
    export class Test{}
  }
}

使用子命名空间就像使用java的内部类一样。

page.ts

new Components.SubComponents.Test()