This is the 5th day of my participation in the August More Text Challenge

1. Run it in the browsertsFile:

The directory tree is as follows:

  • Create a folder called mytsCode and type NPM init -y

  • Run tsc-init to get the tsconfig.json file in the folder

  • Create the SRC and dist directories under mytsCode

  • Create a new page.ts file in SRC

    console.log("I am a page. Ts");
Copy the code

  • Modify the input and output paths in the tsconfig.json file as follows:

    "outDir": "./dist",                        
"rootDir": "./src",    
Copy the code

  • Create an index.html file for the outermost layer

    <! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ts code</title>
</head>
<body>
  <script src="./dist/page.js"></script>
</body>
</html>
Copy the code

  • After TSC is executed, the browser opens index.html and views the console

2. Namespace:

1. Example:

  • Modify thepage.tsThe code in
  • Can be achieved bytsc -w Enable listening mode, so modifiedtsAfter the file, it will compile itself
class Header {
  constructor() {
    const elem = document.createElement('div');
    elem.innerText = 'This is Header';
    document.body.appendChild(elem); }}class Content {
  constructor() {
    const elem = document.createElement('div');
    elem.innerText = 'This is Content';
    document.body.appendChild(elem); }}class Footer {
  constructor() {
    const elem = document.createElement('div');
    elem.innerText = 'This is Footer';
    document.body.appendChild(elem); }}class Page{
  constructor(){
    new Header();
    new Content();
    newFooter(); }}Copy the code
  • index.htmlCode changes
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ts code</title>
</head>
<body>
  <script src="./dist/page.js"></script>
  <script>
    new Page();
  </script>
</body>
</html>
Copy the code
  • performtscAfter open theindex.htmlpage

2.Compiled page.js file

"use strict";
var Header = / * *@class * / (function () {
    function Header() {
        var elem = document.createElement('div');
        elem.innerText = 'This is Header';
        document.body.appendChild(elem);
    }
    returnHeader; } ());var Content = / * *@class * / (function () {
    function Content() {
        var elem = document.createElement('div');
        elem.innerText = 'This is Content';
        document.body.appendChild(elem);
    }
    returnContent; } ());var Footer = / * *@class * / (function () {
    function Footer() {
        var elem = document.createElement('div');
        elem.innerText = 'This is Footer';
        document.body.appendChild(elem);
    }
    returnFooter; } ());var Page = / * *@class * / (function () {
    function Page() {
        new Header();
        new Content();
        new Footer();
    }
    returnPage; } ());Copy the code

These classes are compiled to become global variables, and too many global variables can pollute variables, causing puzzling problems and hence namespaces

Modify the page. Ts file code to:

  • HomeFor the namespace
  • Namespace throughexportExport the exposed parts
namespace Home {
  class Header {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Header';
      document.body.appendChild(elem); }}class Content {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Content';
      document.body.appendChild(elem); }}class Footer {
    constructor() {
      const elem = document.createElement('div');
      elem.innerText = 'This is Footer';
      document.body.appendChild(elem); }}export class Page {
    constructor() {
      new Header();
      new Content();
      newFooter(); }}}Copy the code
  • index.htmlIn thenew Page()Need to change tonew Home.Page()

3. Namespace between multiple files:

The directory tree is 🌲 :

├─ ├─ class.txt ├─ class.txt ├─ class.txt ├─ class.txt ├─ class.txt ├─ class.txt ├─ class.txtCopy the code
  • page.ts
    • ///<reference path="components.ts" />Used to indicateHomeThe namespace depends oncomponents.tsfile
    • KobeisHomeNamespace ofThe child is named afterspace
// page.ts
///<reference path="components.ts" />

namespace Home {
  export namespace Kobe {
    export const teacher: Components.user = {
      name: 'Kobe Bryant'
    };
  }
  export class Page {
    constructor() {
      new Components.Header();
      new Components.Content();
      newComponents.Footer(); }}}Copy the code
  • components.ts
namespace Components {
  // namespace in 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); }}}Copy the code