【十月打卡】第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 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦