ts-13 namespace命名空间 和 /// reference 三斜线指令

namespace命名空间

作用

• 在开发中无法避免全局变量造成污染，ts提供了namespace 来避免这个问题
• 例子
  • index 和 index1 都定义了 ns 变量,这种方式是不行的 ts把他们当作了全局变量
  • image.png
  • 解决方式
    • 使用 export 或者 import
      • export let ns = 1
      • 因为ts会当作成一个模块
    • 使用 namespace

基础用法

•   namespace names {
      export let n1 = '艾克'
    }
  
    console.log(names.n1)
  

• 编译后
  • 其实就给套了一层 function names(你定义的变量名)是个对象

嵌套命名空间

•   namespace names {
      export namespace ys {
        export let n1 = '亚索'
      }
    }
  
    console.log(names.ys.n1)
  

抽离命名空间

• 可以把 index 给抽离出来，在别的地方导入使用
• index.ts

  •   export namespace names {
        export namespace ys {
          export let n1 = '亚索'
        }
      }
    

• index2.ts

  •   import { names } from './index'
      console.log(names.ys.n1)
    

合并命名空间

• 和interface 一样 重名的话会自动合并

  •   export namespace names {
        export let n1 = '亚索'
      }
    
      export namespace names {
        export let n2 = '瑞雯'
      }
    
      console.log(names.n1) // 亚索
      console.log(names.n2) // 瑞雯
    

/// reference三斜线指令

作用

• 三斜线指令，它用于声明文件间的 依赖,可以理解为 import /// 会在编译器在编译过程中要引入的额外的文件
• 语法
  • /// <reference path="..." />

例子

• index.ts

  •   ///<reference path="./index2.ts" />
      ///<reference path="./index3.ts" />
    
      namespace Reference {
        export const name1 = '艾克'
      }
    
      console.log(Reference )
    

  • 在index.ts 统一进行引入，在index.ts里可以获取到 name2 name3,当然现在使用 ts-node index.ts 是打印不出来的 只会在编译后使用
• index2.ts

  •   namespace Reference {
        export const name2 = '瑞雯'
      }
    

• index3.ts

  •   namespace Reference {
        export const name3 = '艾克'
      }
    

• 编译
  • 修改tsconfig.json文件

    • "compilerOptions": {
        "outFile": "./lib/index.js", // 输出位置
        "removeComments": true // 删除注释
      }
      

  • tsc 命令编译
    • 会创建一个lib文件夹，里面有index.js 文件
  • 运行
    • cd lib
    • node index.js
    • 会打印出 { name2: '瑞雯', name3: '艾克', name1: '艾克' }
    • 可以看到打印是没问题的

声明文件引入

• 也可以引入声明文件 比如node声明文件，也会在编译时给引入进来
• 安装node声明文件
  • yarn add @types/node -D
• index.ts
  • ///<reference types="node" />
• 可以看到 也是在index.d.ts 通过 /// reference 导入了很多的包
  • image.png