TypeSript9 命名空间namesapce

我们在工作中无法避免全局变量造成的污染,TypeScript提供了namespace 避免这个问题出现

  • 内部模块,主要用于组织代码,避免命名冲突。
  • 命名空间内的类默认私有
  • 通过 export 暴露
  • 通过 namespace 关键字定义

TypeScript与ECMAScript 2015一样,任何包含顶级import或者export的文件都被当成一个模块。相反地,如果一个文件不带有顶级的import或者export声明,那么它的内容被视为全局可见的(因此对模块也是可见的)

ok,让我们看一个小例子

命名空间中通过export将想要暴露的部分导出

如果不用export 导出是无法读取其值的

namespace a {

export const Time: number = 1000

export const fn = <T>(arg: T): T => {

return arg

}

fn(Time)

}

namespace b {

export const Time: number = 1000

export const fn = <T>(arg: T): T => {

return arg

}

fn(Time)

}

a.Time

b.Time

嵌套命名空间

namespace a {

export namespace b {

export class Vue {

parameters: string

constructor(parameters: string) {

this.parameters = parameters

}

}

}

}

let v = a.b.Vue

new v('1')

抽离命名空间

a.ts

export namespace V {

export const a = 1

}

b.ts

import {V} from '../observer/index'

console.log(V);

//{a:1}

简化命名空间

namespace A {

export namespace B {

export const C = 1

}

}

import X = A.B.C

console.log(X);

合并命名空间

TypeSript10 模块学习-CSDN博客

相关推荐
不好听6133 小时前
TypeScript 类型系统:`type` vs `interface` 与 `import type`
typescript
晓说前端19 小时前
TypeScript 高级特性 —— 类型断言与泛型
前端·typescript
烬羽1 天前
React 状态提升:一个 ColorPicker,彻底搞懂状态该放哪里
react.js·typescript·设计
ji_shuke2 天前
Playwright 从零到 CI 实战:基于 TypeScript 的端到端测试完整指南
javascript·ci/cd·typescript·playwright
小林ixn2 天前
React + TypeScript 实战:从“类型体操”到“数据持久化”,一次讲透组件通信与副作用管理
前端·react.js·typescript
用户0934077735142 天前
HarmonyOS WPS Open SDK 快速入门:HAR 装上就能打开文档吗
typescript·harmonyos
不好听6132 天前
从困惑到理解:React 父子组件通信的三种写法
react.js·typescript
烬羽2 天前
React 状态归属:两个版本的用户名编辑器,告诉你 state 该放哪
react.js·typescript·前端框架
breeze jiang2 天前
React + TypeScript 编辑表单:为什么要区分 name 和 editingName
前端·typescript
gis开发之家3 天前
《Vue3 从入门到大神40篇》Vue3 源码详解(十):diff 算法全解析 —— 为什么 Vue3 比 Vue2 更快?
javascript·算法·typescript·前端框架·vue3·vue3源码