TypeScript namespace All In One

TypeScript namespace All In One

namespaces

“Internal modules” are now “namespaces”

/// <reference path = "./Components.ts" />
/// <reference path = "./Interfaces.ts" />

namespace NS {
  export class App implements Interfaces.Name {
    constructor(public name: string) {
      // 在 constructor 中使用 public 定义的 name 不需要手动赋值， 避免重复
      // this.name = name;
      new Components.Init();
      new Components.Run();
    }
    getName() {
      console.log('this.name', this.name);
      return this.name;
    }
  }
  export class App2 implements Interfaces.Name {
    public name: string;
    constructor(name) {
      // 没有在 constructor 之前定义的 name 需要手动赋值
      this.name = name;
      new Components.Init();
      new Components.Run();
    }
    getName() {
      console.log('this.name', this.name);
      return this.name;
    }
  }
}

namespace NS {
  export namespace NestedNameSpace {
    export class App {
      constructor(public name: string) {
        console.log('nested namespace');
      }
    }
  }
}

// const app = new NS.App('xgqfrms');
// app.getName();


// const appNested = new NS.App.NestedNameSpace('xgqfrms');

namespace alias

import namespace

namespace Shapes {
  export namespace Polygons {
    export class Triangle {
      constructor() {
        console.log('triangle');
      }
    }
    export class Square {
      constructor() {
        console.log('square');
      }}
  }
}

// namespace alias
import polygons = Shapes.Polygons;
let sq = new polygons.Square();

// namespace 
const tr = new Shapes.Polygons.Triangle();

modules

“External modules” are now simply “modules”

// ...

namespace demo

IIFE function & closure

1. demo.ts

// 1. namespace function
namespace a {
  const func = () => {
    //
  }
}

// 2. function
const test = () => {
  //
}

namespace a {
  const func = () => {
    // 'this' cannot be referenced in a module or namespace body.(2331) ❌
    console.log('namespace function', a, this);
  }
  // Property 'func' does not exist on type 'typeof a'.(2339)
  a.func = func;
  // ❌
  // this.func = function() {
  //   console.log('namespace function');
  // }
  // 'this' cannot be referenced in a module or namespace body.(2331) ❌
  // 'this' implicitly has type 'any' because it does not have a type annotation.(2683) ❌
}

namespace a {
  const func = () => {
    console.log('namespace function', a);
  }
  // export function ❌
  export func;
}


namespace NameSpace { 
   export interface InterfaceName {
     name: string,
     age: number;
   }
   // export class ✅
   export class SomeClassName {
     constructor(private name: string) {
       this.name = name;
     }
   }  
}

"use strict";
var a;
(function (a) {
    const func = () => {
        console.log('namespace function', a);
    };
    // export function ❌
    func;
})(a || (a = {}));
var NameSpace;
(function (NameSpace) {
    class SomeClassName {
        constructor(name) {
            this.name = name;
            this.name = name;
        }
    }
    // export class ✅
    NameSpace.SomeClassName = SomeClassName;
})(NameSpace || (NameSpace = {}));

2. demo.js

"use strict";
// 1. namespace function
var a;
(function (a) {
    const func = () => {
        console.log('namespace function', a);
    };
})(a || (a = {}));

// 2. function
const test = () => {
    console.log('global function', a);
};

export

// 使用 export TypeScript 才会有智能提示 ✅
export namespace ShapesTest {
  export namespace Polygons {
    export class Triangle {
      constructor() {
        console.log('triangle');
      }
    }
    export class Square {
      constructor() {
        console.log('square');
      }}
  }
}
// ShapesTest.Polygons.Triangle;

//  使用 export TypeScript 才会有智能提示 ✅, 最外层 namespace export 可以省略 ✅
namespace Shapes {
  export namespace Polygons {
    export class Triangle {
      constructor() {
        console.log('triangle');
      }
    }
    export class Square {
      constructor() {
        console.log('square');
      }}
  }
}

// Shapes.Polygons.Triangle;

// namespace alias
import polygons = Shapes.Polygons;
let sq = new polygons.Square();

// namespace 
const tr = new Shapes.Polygons.Triangle();

refs

https://www.typescriptlang.org/docs/handbook/namespaces.html

https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html

https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html#classes-functions-and-object-literals-are-namespaces

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---