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文件,就可以使用命名空间暴露的模块了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./build/demo7.js"></script>
  <title>Document</title>
</head>
<body>
  <script>
    new Home.Page()
  </script>
</body>
</html>

在这里插入图片描述

使用命名空间的好处:

  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.jscomponents.js,为了减少这种引入方式,可以在tsconfig.json中配置所有ts文件导出到同一个文件中去。

tsconfig.json

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="./build/page.js"></script>
  <title>Document</title>
</head>
<body>
  <script>
    new Home.Page()
  </script>
</body>
</html>
命名空间的依赖声明

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

page.ts

///<reference path='./components.ts'/> 为引入components命名空间声明方式。

///<reference path='./components.ts'/>

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()
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值