多个命名空间的引用
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 lang="en">
<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