【十月打卡】第59天 TypeScript(15)
標簽：
Typescript
命名空间 namespace
namespace
-
作用：防止暴露过多的全局变量，导致代码不可维护
-
将需要暴露的模块通过export来导出
namespace基本示例
index.ts
namespace Home {
class Header {
constructor() {
console.log('Header');
}
}
class Content {
constructor() {
console.log('Content');
}
}
class Footer {
constructor() {
console.log('Footer');
}
}
// 需要export才能在Home下调用
export class Page {
constructor() {
new Header();
new Content();
new Footer();
}
}
}
调用方式：
<!DOCTYPE html>
.....
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./dist/index.js"></script>
<script>
new Home.Page()
</script>
</html>
命名空间嵌套
namespace Parent {
export namespace Child {
export class Header {
constructor() {
console.log('Header');
}
}
}
}
调用方式： new Parent.Child.Header()
命名空间引用
命名空间引用基本使用
// components.ts
namespace Components {
export class Content {
constructor() {
console.log('这是公共组件');
}
}
}
// index.ts
/// <reference path="./components.ts" />
namespace Home {
export class Page {
constructor() {
new Components.Content();
console.log('Page');
}
}
}
修改tsconfig.json
如果要把编译生成的index.js和components.js文件都打包到index.js一个文件中，
需要修改tsconfig.json的配置：
"outFile": "./dist/index.js",
"module": "amd",
<reference path="./components.ts" />只是标明引用关系，并不会对代码编译运行产生影响
命名空间还可以导出类型声明
// components.ts
namespace Components {
export interface User {
name: string;
}
}
// index.ts
/// <reference path="./components.ts" />
namespace Home {
export class Page {
user: Components.User = { name: 'tz' };
constructor() {}
}
}
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦