typescript学习系列5:命名空间namespace

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

1.在浏览器下运行`ts`文件：

目录树如下：

新建文件夹mytscode文件夹,输入npm init -y
运行tsc -init,文件夹中多出tsconfig.json文件
mytscode文件夹下新建src和dist目录
src中新建一个page.ts文件
```
console.log("我是page.ts");
```

将tsconfig.json文件中输入和输出路径修改如下：

"outDir": "./dist",                        
"rootDir": "./src",

最外层创建一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ts代码</title>
</head>
<body>
  <script src="./dist/page.js"></script>
</body>
</html>

终端执行tsc后，浏览器打开index.html,观看控制台

2.命名空间：

1.例子：

修改page.ts中的代码
可以通过tsc -w 开启监听模式，这样修改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();
  }
}

index.html代码中的修改

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ts代码</title>
</head>
<body>
  <script src="./dist/page.js"></script>
  <script>
    new Page();
  </script>
</body>
</html>

执行tsc后打开index.html页面如下图：

2.编译后的page.js文件

下面代码为编译后的page.js代码：

"use strict";
var Header = /** @class */ (function () {
    function Header() {
        var elem = document.createElement('div');
        elem.innerText = 'This is Header';
        document.body.appendChild(elem);
    }
    return Header;
}());
var Content = /** @class */ (function () {
    function Content() {
        var elem = document.createElement('div');
        elem.innerText = 'This is Content';
        document.body.appendChild(elem);
    }
    return Content;
}());
var Footer = /** @class */ (function () {
    function Footer() {
        var elem = document.createElement('div');
        elem.innerText = 'This is Footer';
        document.body.appendChild(elem);
    }
    return Footer;
}());
var Page = /** @class */ (function () {
    function Page() {
        new Header();
        new Content();
        new Footer();
    }
    return Page;
}());

这些Header、Content、Footer等类编译后成为了全局变量，过多的全局变量会造成变量污染，从而引发莫名其妙的问题，由此引出了命名空间，使上述问题优化，减少全局变量的存在。

修改page.ts文件代码为：

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中的new Page()需要修改为new Home.Page()

3.多个文件之间的命名空间:

文件夹目录树🌲如下:

mytscode  
├─ dist                 
│  └─ page.js           
├─ src                  
│  ├─ components.ts     
│  └─ page.ts           
├─ index.html           
├─ package.json         
└─ tsconfig.json

page.ts
- ///<reference path="components.ts" />用来说明Home命名空间依赖于components.ts文件，阐述了两者之间的依赖关系。
- Kobe是Home命名空间的子命名空间，命名空间下也是可以创建子空间的

// page.ts
///<reference path="components.ts" />

namespace Home {
  export namespace Kobe {
    export const NBAPlayer: Components.user = {
      name: '科比.布莱恩特'
    };
  }
  export class Page {
    constructor() {
      new Components.Header();
      new Components.Content();
      new Components.Footer();
    }
  }
}

被page.ts作为依赖的components.ts代码如下： components命名空间下导出了：
user接口
Header类
content类
Footer类

namespace Components {
  // Components中的命名空间
  export interface user {
    name: string;
  }

  export class Header {
    //略 内容同上
  }

  export class Content {
    //略 内容同上
  }

  export class Footer {
    //略 内容同上
  }
}