TypeScript中的命名空间使用

最新推荐文章于 2024-06-02 22:16:29 发布

小二李

最新推荐文章于 2024-06-02 22:16:29 发布

阅读量681

点赞数

分类专栏：前端文章标签： TypeScript 命名空间

本文链接：https://blog.csdn.net/weixin_43800535/article/details/124311960

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本篇文章将介绍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>

在这里插入图片描述

使用命名空间的好处：

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

命名空间的组合使用

创建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就可以使用所有提供的组件了。

<!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
评论
TypeScript中的命名空间使用

TypeScript中的命名空间使用
复制链接

扫一扫

专栏目录