TypeScript 命名空间-Namespace
<p>TypeScript 通过 tsc 编译成 JavaScript 时，用的是 var 全局变量，var 用多了会造成全局变量污染，为了解决这个问题，使用命名空间。</p><pre><code class="language-sh"># 生成 package.json 文件
npm init -y
# 生成 tsconfig.json文件
tsc -init
</code></pre>
<h1 id="命名空间">命名空间</h1>
<pre><code class="language-ts">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();
}
}
}
</code></pre>
<p>使用：</p>
<pre><code class="language-js">new Home.Page();
</code></pre>
<p>只能通过 Home 访问 Page，其他变量无法访问，避免了全局变量的污染。<br>
这就是 TypeScript 给我们提供的类似模块化开发的语法，它的好处就是让全局变量减少了很多，实现了基本的封装，减少了全局变量的污染。</p>
<h1 id="多命名空间组件化">多命名空间（组件化）</h1>
<pre><code class="language-ts">namespace Components {
export class Header {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Header";
document.body.appendChild(elem);
}
}
export class Content {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Content";
document.body.appendChild(elem);
}
}
export class Footer {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Footer";
document.body.appendChild(elem);
}
}
}
</code></pre>
<pre><code class="language-ts">namespace Home {
export class Page {
constructor() {
new Components.Header();
new Components.Content();
new Components.Footer();
}
}
}
</code></pre>
<p>为了便利，需要把这两个 ts 文件编译输出成一个 js 文件，参考：TypeScript 多个文件编译成一个 js 文件</p>
<h1 id="子命名空间">子命名空间</h1>
<pre><code class="language-ts">
namespace Components {
export namespace SubComponents {
export class Test {}
}
//someting ...
}
</code></pre>
<hr>
<p>相关文章：<br>
TypeScript 多个文件编译成一个 js 文件<br>
参考：<br>
技术胖——TypeScript从入门到精通（22. 初识命名空间-Namespace）<br>
技术胖——TypeScript从入门到精通（23. 深入命名空间-Namespace）</p><br><br>
来源：https://www.cnblogs.com/xch-jiang/p/14260159.html
頁:
[1]