当前位置：网站首页>Typescript from getting started to mastering (XXII) namespace namespace (I)

Typescript from getting started to mastering (XXII) namespace namespace (I)

2022-07-29 03:45:00 【Haha, APE】

Before our TS The effect is output at the console terminal , Now let's create a new simple project , Let's have ts Running in a project

Build the most basic TS development environment ：

After setting up the folder , open VSCode, Pull the folder into the editor , And then open the terminal , function npm init -y, establish package.json file .
After generating the file , We then run... In the terminal tsc -init, Generate tsconfig.json file .
newly build src and build Folder , Build another one index.html file .
stay src Under the table of contents , Create a new one page.ts file , That's what we're going to write ts The file .
To configure tsconfig.json file , Set up outDir and rootDir, That is, set the file directory to be compiled , And compiled file directories .
Then write index.html, introduce <script src="./build/page.js"></script>, When let's not yet page.js file .
To write page.ts file , Add an output console.log(' Haha, APE '), Input again at the console tsc, Will generate page.js file
Then go to the browser to view index.html file , If the F12 You can see Haha, APE , It shows that our construction is normal .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./build/page.js"></script>
    <title>Document</title>
  </head>
  <body></body>
</html>

Insert picture description here
The above is the environment configuration needed to develop the most basic front-end project （ Working on projects , Use as much as possible TypeScript To write ）

Problems when there is no namespace ：

For better understanding , First write such code , In the form of class index.html To realize header,content and Footer part , Similar to the template we often say .

stay page.ts In the document , Write the following code ：

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();
    new Footer();
  }
}

After writing, we use tsc Compile once , And then modify index.html file , Introduce

<body>
  <script>new Page();</script>
</body>

The above code seems to have no problem
But you open page.js You will find in the file Variables are all global variables , It's all used var Declarative .
Too many global variables make our project heavy and complex , Code becomes unmaintainable

Our ideal state is just one Page Global variables of , Others can be modularized and encapsulated , It cannot be exposed to the overall situation .
So we can use our namespace

Use of namespaces ：

Namespace declaration keywords ：namespace
for example : Make a statement namespace Home, Classes that need to be exposed , have access to export key word , In this way, only the exposed classes are global , Others will no longer generate global pollution , The code is as follows ：

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();
      new Footer();
    }
  }
}

TS When the code is finished , Until then index.html Make changes in the document , Call in the form of namespace . After finish , use tsc Compile the , You can also use tsc -w Monitoring , As long as there are changes, it will be recompiled .

This is it. TypeScript Provide us with a syntax similar to modular development , Its advantage is to reduce global variables a lot , Realize the basic encapsulation , Reduce the pollution of global variables .

原网站

版权声明
本文为[Haha, APE]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130552382730.html