TypeScript从入门到精通（二十二）namespace命名空间（上）

最新推荐文章于 2024-04-23 10:45:54 发布

哈哈小猿

最新推荐文章于 2024-04-23 10:45:54 发布

阅读量325

点赞数

分类专栏： TS学习教程文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_42251357/article/details/121745336

版权

TS学习教程专栏收录该内容

25 篇文章 2 订阅

订阅专栏

之前我们的TS效果是在控制台终端输出的，现在我们新建一个简单的项目，让我们的ts在项目中运行

搭建最基础的TS开发环境：

建立好文件夹后，打开 VSCode，把文件夹拉到编辑器当中，然后打开终端，运行npm init -y,创建package.json文件。
生成文件后，我们接着在终端中运行tsc -init,生成tsconfig.json文件。
新建src和build文件夹，再建一个index.html文件。
在src目录下，新建一个page.ts文件，这就是我们要编写的ts文件了。
配置tsconfig.json文件，设置outDir和rootDir，也就是设置需要编译的文件目录，和编译好的文件目录。
然后编写index.html，引入<script src="./build/page.js"></script>,当让我们现在还没有page.js文件。
编写page.ts文件，加入一句输出console.log('哈哈小猿'),再在控制台输入tsc,就会生成page.js文件
再到浏览器中查看index.html文件，如果按F12可以看到哈哈小猿，说明我们的搭建正常了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./build/page.js"></script>
    <title>Document</title>
  </head>
  <body></body>
</html>

在这里插入图片描述
上面就是开发最基础的前端项目时需要作的环境配置（在做项目，尽量使用TypeScript来进行编写）

没有命名空间时的问题：

为了更好的理解，先写一下这样代码，用类的形式在index.html中实现header,content和Footer部分，类似我们常说的模板。

在page.ts文件里，写出下面的代码：

class Header {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "This is Header";
    document.body.appendChild(elem);
  }
}

class Content {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "This is Content";
    document.body.appendChild(elem);
  }
}

class Footer {
  constructor() {
    const elem = document.createElement("div");
    elem.innerText = "This is Footer";
    document.body.appendChild(elem);
  }
}

class Page {
  constructor() {
    new Header();
    new Content();
    new Footer();
  }
}

写完后我们用tsc进行编译一次，然后修改index.html文件，在标签里引入

<body>
  <script>new Page();</script>
</body>

上面的代码看起来是没有任何问题的
但是你打开page.js文件你会发现里面的变量全是全局变量，都是用var声明的。
过多的全局变量使得我们的项目变得沉重复杂，代码变得不可维护

我们理想的状态是只要一个Page的全局变量就行了，其他的可以模块化封装起来，不能暴露到全局里面。
所以就可以使用我们的命名空间了

命名空间的使用：

命名空间声明关键词：namespace
例如:声明一个namespace Home,需要暴露出去的类，可以使用export关键词，这样只有暴漏出去的类是全局的，其他的不会再生成全局污染了，代码如下：

namespace Home {
  class Header {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Header";
      document.body.appendChild(elem);
    }
  }

  class Content {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Content";
      document.body.appendChild(elem);
    }
  }

  class Footer {
    constructor() {
      const elem = document.createElement("div");
      elem.innerText = "This is Footer";
      document.body.appendChild(elem);
    }
  }

  export class Page {
    constructor() {
      new Header();
      new Content();
      new Footer();
    }
  }
}

TS 代码写完后，再到index.html文件中进行修改，用命名空间的形式进行调用。写完后，用tsc编译一下，也可以使用tsc -w进行监视了，只要有改变就会进行重新编译。

这就是 TypeScript 给我们提供的类似模块化开发的语法，它的好处就是让全局变量减少了很多，实现了基本的封装，减少了全局变量的污染。

哈哈小猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypeScript从入门到精通（二十二）namespace命名空间（上）

之前我们的TS效果是在控制台终端输出的，现在我们新建一个简单的项目，让我们的ts在项目中运行搭建最基础的TS开发环境：建立好文件夹后，打开 VSCode，把文件夹拉到编辑器当中，然后打开终端，运行npm init -y,创建package.json文件。生成文件后，我们接着在终端中运行tsc -init,生成tsconfig.json文件。新建src和build文件夹，再建一个index.html文件。在src目录下，新建一个page.ts文件，这就是我们要编写的ts文件了。配置tsconfi
复制链接

扫一扫