TypeScript 命名空间
多个命名空间的引用
components.ts
namespace Components{
export interface User{
name: string
}
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);
}
}
}page.ts
// 依赖命名空间，Home 这个命名空间依赖于 Components 这个命名空间
///<reference path = 'components.ts' />
namespace Home{
// 子命名空间
export namespace SubComponents{
export class Test{}
}
export class Page{
// 引用另一个命名空间的 interface
user: Components.User = {
name: '111'
}
constructor() {
new Components.Header();
new Components.Content();
new Components.Footer();
}
}
}index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./dist/page.js"></script>
<script>
new Home.Page();
</script>
</body>
</html>多个文件打包到一个文件的配置
tsconfig 中的 outFile
- 上一篇 »JavaScript命名空间的理解与实现
- 下一篇 »php命名空间与可变函数