Typescript 中的namespace

 命名空间:

类似 vuex 的 namespace 相当于一个容器。

namespace 是一种将相关代码组织在一起的方式,中文译为“命名空间”。

它出现在 ES 模块诞生之前,作为 TypeScript 自己的模块格式而发明的。但是,自从有了 ES 模块,官方已经不推荐使用 namespace 了。

namespace 与模块的作用是一致的,都是把相关代码组织在一起,对外输出接口。区别是一个文件只能有一个模块,但可以有多个 namespace。由于模块可以取代 namespace,而且是 JavaScript 的标准语法,还不需要编译转换,所以建议总是使用模块,替代 namespace

1. 在  .ts 文件里面使用

a.ts 

只有内部加  export 的能在  namespace 外面使用 。

b.ts 

命名空间加 export 后可以在 其他文件导入使用 

② 、namespace 内部还可以使用import命令输入外部成员,相当于为外部成员起别名。当外部成员的名字比较长时,别名能够简化代码。 

export  namespace Utility {
  export function log(msg: string) {
    console.log(msg);
  }
  function error(msg: string) {
    console.error(msg);
  }
}

namespace mySpace {
  import n = Utility.log
}

③、namespace 的嵌套使用

export namespace Utility {
  export function log(msg: string) {
    console.log(msg);
  }

  export namespace SecondSpace {
    export namespace ThirdSpace {
      export function error(msg: string) {
        console.error(msg);
      }
    }
  }
}

  Utility.SecondSpace.ThirdSpace.error;

④、namespace 的合并

多个同名的 namespace 会自动合并,这一点跟 interface 一样。合并命名空间时,命名空间中的非export的成员不会被合并,但是它们只能在各自的命名空间中使用。

 namespace 与 function 、class 、enum的合并

命名空间还可以跟同名function 、class合并,但是要求同名function 、class必须在命名空间之前声明。这样做是为了确保先创建出一个function 、class,然后同名的命名空间就相当于给这个function 、class添加额外的属性。 

与enum同名

enum E {
  a,
  b,
  c,
}
namespace E {
  export const m = 999;
  export function f() {
    console.log(E.a);
  }
}
console.log(E.m); //999
E.f(); //0

但是不能重复

 

2.在 d.ts 文件使用 

最大区别 

d.ts文件 默认是全局可见的

类型声明文件里面,顶层和 namespace里面可以使用export命令,也可以不用,除非使用者脚本会显式使用export命令输入类型。

 

  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript,命名空间是通过使用关键字namespace来定义的。命名空间提供了一种将相关的代码组织在一起的方式,可以避免全局命名冲突。命名空间的语法格式如下: ``` namespace NamespaceName { // 命名空间内的代码 } ``` 在命名空间内部,可以定义接口、类和其他代码。使用export关键字可以将定义的成员导出,以便在命名空间外部使用。例如: ``` namespace MyNamespace { export interface MyInterface { // 接口定义 } export class MyClass { // 类定义 } } ``` 通过导出的接口和类可以在命名空间外部进行访问和使用。需要注意的是,由于TypeScript是JavaScript的超集,命名空间的概念来源于JavaScript。因此,在编译为JavaScript之后,命名空间会被转换为模块,并使用模块化的方式来组织代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [TypeScript 基础 — namespace 命名空间](https://blog.csdn.net/weixin_46267040/article/details/125369703)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [【TypeScript入门】TypeScript入门篇——命名空间](https://blog.csdn.net/dxt19980308/article/details/128625265)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值