TypeScript 命名空间

首先创建文件夹然后终端定位到文件夹下生成 package.json
第二执行以下命令生成 tsconfig.json
第三改 tsconfig.json里面的路径找到 outDir 和 rootDir
第四在page.ts写入以下代码
最后在html文件中加入

第一先在src里面创建 components.js
第二改page.ts
第三改 tsconfig.json里面的路径找到 module把 commonjs改 amd 添加 outFile路径

page.ts用import引入
component.ts改成以下代码

TypeScript学习笔记

首先创建文件夹然后终端定位到文件夹下生成 package.json

cnpm init -y

没安装cnpm就执行以下命令

npm init -y

第二执行以下命令生成 tsconfig.json

tsc -init

然后建两文件夹 build 和 src, 然后根目录可以建html文件了, 在src目录下创建page.ts文件

第三改 tsconfig.json里面的路径找到 outDir 和 rootDir

"outDir": "./build" ,  // 生成js的目录 
"rootDir": "./src"     // 存放ts的目录

第四在page.ts写入以下代码

namespace Home {
    class Header {
      constructor() {
        const elem = document.createElement("div");
        elem.innerText = "史迪奇的头";
        document.body.appendChild(elem);
      }
    }
  
    class Content {
      constructor() {
        const elem = document.createElement("div");
        elem.innerText = "史迪奇的身体";
        document.body.appendChild(elem);
      }
    }
  
    class Footer {
      constructor() {
        const elem = document.createElement("div");
        elem.innerText = "史迪奇的脚";
        document.body.appendChild(elem);
      }
    }
  
    export class Page {
      constructor() {
        new Header();
        new Content();
        new Footer();
      }
    }
  }

最后在html文件中加入

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">

    <!-- 这是选择路径 -->
    <script src="./build/page.js"></script>
    <title>史迪奇国王</title>
</head>
<body>
    <script>

    <!-- 这是生成文件 -->
    new Home.Page();
    </script>
</body>
</html>

对比这个文件你会学到东西

密码: sdq3

命名空间的嵌套

接着以上代码

第一先在src里面创建 components.js

    namespace Components {

      // 子命名空间
      export namespace SdqComponents{
        export class Sdz {}
      }

      export class Header {
        constructor() {
          const elem = document.createElement("div");
          elem.innerText = "史迪奇的头";
          document.body.appendChild(elem);
        }
      }
    
      export class Content {
        constructor() {
          const elem = document.createElement("div");
          elem.innerText = "史迪奇的身体";
          document.body.appendChild(elem);
        }
      }
    
      export class Footer {
        constructor() {
          const elem = document.createElement("div");
          elem.innerText = "史迪奇的脚";
          document.body.appendChild(elem);
        }
      }
}

第二改page.ts

namespace Home {
  export class Page {
    constructor() {
      new Components.Header();
      new Components.Content();
      new Components.Footer();
    }
  }
}

第三改 tsconfig.json里面的路径找到 module把 commonjs改 amd 添加 outFile路径

"module": "amd", 
"outFile": "./build/page.js"

对比这个文件你会学到进步很大

import语法

page.ts用import引入

// 引入
import { Header, Content, Footer } from "./components";
export class Page {
  constructor() {
    new Header();
    new Content();
    new Footer();
  }
}

component.ts改成以下代码

// export是ES6中的接口
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);
  }
}

html文件引用

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <!-- require.js 的 CDN 地址 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
    <script src="./build/page.js"></script>
    <title>史迪奇国王</title>
</head>
<body>
    <script>
        // require.js方式引入
        require(["page"], function (page) {
          // ES6基本写法
          new page.default();
        });
      </script>
</body>
</html>

作者: 我叫史迪奇
本文来自于: https://sdq3.link/TypeScript-NameSpace.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

TypeScript 命名空间

首先创建文件夹然后终端定位到文件夹下生成 package.json

第二 执行以下命令生成 tsconfig.json

第三 改 tsconfig.json里面的路径 找到 outDir 和 rootDir

第四 在page.ts写入以下代码