如何轻松掌握与理解网页开发中的namespace声明与运用

#该文章能让你了解什么？

1. namespace的含义
2. namespace如何使用
3. 项目中的实际应用

一、TS的namespace

TS的namespace，通过字面意思命名空间，我们可以扩充含义为： 有命名的一个空间？ 用来命名的空间？... 无论如何理解，我们可以推导出ts给我们提供的该关键字，主要是让我们的编码提供一个空间的概念。

例如：我们的家里有衣服、鞋子、帽子、裤子等。没有namespace之前，从开发人员的角度我们都叠好叠好了（分文件夹了），但是从老妈的眼里（机器运行环境）来看我们的东西其实都混到了一起。而有了namespace命名空间相当于给我们示例物件提供了声明： 衣柜、鞋柜、衣帽间..的能力。把指定的东西放指定的位置，自己开发起来看顺眼了，思路可以更明确，老妈看顺眼了，编译也不容易出bug。

以上是我对namespace的简单理解，简而言之：namespace给我们提供了更优秀的编码规范能力。

二、namespace的使用

1、声明namespace到一个声明文件中例如（typing.d.ts），在声明文件中声明，这样就不需要import就可以使用该命名空间了。

//该文件 ： typing.d.ts 
// 声明 命名空间 这个空间的命名，我以鞋柜举例
declare namespace SHOEBOX {
    
    //在这里吗我们可以进行该空间下的方法、类型、接口、实体类等等定义
    //就像定义鞋子在鞋柜意思一样。
    type Shoe = {
        size:number
        name:string
    }
}

2、使用namespace,无需import通过命名空间调用即可。

//other.ts 其他的ts文件中
const shoe:SHOEBOX.Shoe = {
    size:1,
    name:"帆布鞋",
}

3、如果文件中有大量该namespace中的声明类型，不想在前面加命名空间怎么办？

如：我想把 SHOEBOX.Shoe变成 Shoe。 我在实际项目中看见有的同事项目中大量的调用，代码看着难受。所以想着命名空间是不是在需要大量引用的时候可以import，省去后面的调用操作？ 答案是：可以的！

在React的声明文件中，我们可以看到React本身也是一个命名空间，那我们为什么可以import他的声明类型呢？答案就在export = React; export as namespace React;这俩行。

所以通过该方法可以导出我们的namespace，从而在其他地方直接导入。 所以我们将文件改成：

export = SHOEBOX;   
export as namespace SHOEBOX;
//该文件 ： typing.d.ts 
declare namespace SHOEBOX {
    //export 该类型
   export type Shoe = {
        size:number
        name:string
    }
}

在需要的大量调用的文件中，我们就可以import了！

import {Shoe} from './typing'

const shoe:Shoe = {
    size:1,
    name:"鞋子"
}

三、项目中我们如何使用？

1. 可以在我们的接口目录中定义命名空间声明接口返回的类型进行统一管理和使用。
2. 通过命名空间我们可以很方便的在不同的模块使用相同的类型名声明，比如有的公司接口返回的User和界面使用的User定义相差甚大，有的同学就会定义个ApiUser，UIUser的对象...emmm诸如此类。

简而言之，namespace是ts项目模块间实现高内聚、低耦合的一大利器。 ...

瑞思拜~ See You

新年新号重新开始写文章了~ 今年励志更新300篇！！Web、Android、Flutter等大前端相关文章。