TypeScript命名空间

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

demo.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();
　　}
}

这些代码编译完是这样的

demo.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;
}());

这些类都变成了一个全局变量，过多的全局变量是不可维护的。这个时候要运用模块化的思想，将这些 class 都包在一个命名空间里面

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();
　　　　}
　　}
}

<script>
　　new Home.Page();
</script>

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

es6模块nodejs模块和typescript模块发布时间：2022-07-18

转载：《TypeScript 中文入门教程》 4、类发布时间：2022-07-18

客服电话

电子邮件

TypeScript命名空间

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053