TypeScript import 

///<reference path = 'components.ts' />
namespace Home{
  export class Page{
    user: Components.User = {
      name: '111'
    }
    constructor() {
      new Components.Header();
      new Components.Content();
      new Components.Footer();
    }
  }
}

这个 ts 文件有个问题，就是 Components 从哪来，不是很清楚，必须打开其他文件才能追溯到。如果有很多文件，去追溯的话，比较麻烦，不够直观，我们换一种写法

 

components.ts

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

import { Header, Content, Footer } from './components';

export default class Page{ 
  constructor() {
    new Header();
    new Content();
    new 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="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
  <script src="./dist/page.js"></script>

  <script>
    require(['page'], function(page){
      new page.default();
    })
  </script>
</body>
</html>

 

posted @ 2020-06-23 06:39  wzndkj  阅读(393)  评论(0)  编辑  收藏  举报