Modules vs namespaces

• namespace-and-module

1. module

1.1 Global module

• By default, when you start writing code in a new TypeScript file, it is in the global namespace
• Using the global variable space is dangerous because it conflicts with code naming within the file.We recommend using the file module mentioned below

foo.ts

const foo = 123;

bar.ts

const bar = foo; // allowed

1.2 File module

• File modules are also called external modules.If you have import or export at the root level of your TypeScript file, it will create a local scope within that file
• Module is the abbreviation of external module in TS, focusing on code and reuse
• Modules execute in their own scope, not in the global scope
• Variables, functions, classes, etc. in a module are not visible externally unless you export it
• If you want to use variables exported from a module, you need to import them

export const a = 1;
export const b = 2;
export default "hello ";

import name, { a, b } from "./1";
console.log(name, a, b);

1.3 Module specifications

• AMD: Don't use it, it only works in the browser;
• SystemJS: This was a good experiment and has been replaced by ES modules;
• ES Modules: It's not ready.
• It would be a good idea to use the module: commonjs option instead of these modes

2. namespace

• When the amount of code is large, in order to avoid namespace conflicts, similar functions, classes, and interfaces can be placed in the namespace.
• The namespace can wrap the code and expose only the objects that need to be accessed externally. The namespace can be exported through export
• Namespace is an internal module, mainly used to organize code and avoid naming conflicts.

2.1 Internal division

export namespace zoo {
  export class Dog {
    eat() {
      console.log("zoo dog");
    }
  }
}
export namespace home {
  export class Dog {
    eat() {
      console.log("home dog");
    }
  }
}
let dog_of_zoo = new zoo.Dog();
dog_of_zoo.eat();
let dog_of_home = new home.Dog();
dog_of_home.eat();

import { zoo } from "./3";
let dog_of_zoo = new zoo.Dog();
dog_of_zoo.eat();

2.2 Principle

• In fact, a namespace is essentially an object. Its function is to organize a series of related global variables into the attributes of an object.

namespace Numbers {
  export let a = 1;
  export let b = 2;
  export let c = 3;
}

var Numbers;
(function (Numbers) {
  Numbers.a = 1;
  Numbers.b = 2;
  Numbers.c = 3;
})(Numbers || (Numbers = {}));

3. Files, modules and namespaces

3.1 Files and modules

• Each module is different src\table1.ts

export module Box {
  export class Book1 {}
}

src\table2.ts

export module Box {
  export class Book1 {}
}

src\table3.ts

export module Box {
  export class Book1 {}
}

3.2 Space

• namespace is different from module, namespace is unique in the global space

src\table1.ts

namespace Box {
  export class Book1 {}
}

src\table2.ts

namespace Box {
  export class Book1 {}
}

src\table3.ts

namespace Box {
  export class Book1 {}
}

3.3 Documentation

• Each file is independent

src\table1.ts

export class Book1 {}

src\table2.ts

export class Book1 {}

src\table3.ts

export class Book1 {}