Relationship and usage of TypeScript module and namespace

1. Module

1. Global module

By default, when you start writing code in a new TypeScript file, it is in the global namespace

It is dangerous in the global variable space because it will conflict with the code naming inside the file. We recommend using the file modules mentioned below

Example:

// Because it is a global variable by default// Therefore, an error will be reported: the block range variable "name" cannot be redeclared.  ts(2451)let name = 'Zhang San';

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 in this file

Modules are the abbreviation of external modules in TS, focusing on code reuse

Modules are executed in their own scope, not in global scope

Variables, functions, classes, etc. in a module are not visible externally unless they are exported.

If you want to use variables exported in a module, you need to import

Example:

// At this time, a, b and the default exported name can be imported and used in other files// Since c is not exported, an error will be reported when other files import c.export const a = 1;
export const b = 2;
const c = 3;
export default { name: 'Tom' }
// Import// import { a, b } from './'

3. Module specifications

• AMD: Don't use it, it only works in the browser
• SystemJs: This is a good experiment, which has been replaced by the ES module
• ES module: It is not ready, the browser is not yet supported
• Use module: commonjs  to replace these modules, commonjs supports both node and browser

2. Namespace

In the case of large amount of code, in order to avoid namespace conflicts, similar functions, classes, and interfaces can be prevented from being in the namespace

The namespace can wrap the code, expose only objects that need to be accessed externally, and export it outward through export within the namespace.

Namespaces are internal modules, mainly used to organize code to avoid naming conflicts

Example:

// Note: This can be used directly in the current file, or imported into other filesexport namespace person {
  class Woman { };
  // Only if the export keyword is added here will be exported, otherwise it will be private  export class Man {
    eat() { return 'Have a meal' }
  }
}
export namespace animal {
  class Bird { };
  // Only if the export keyword is added here will be exported, otherwise it will be private  export class Tiger {
    eat() { return 'Eat meat' }
  }
  // Namespace nested namespace  export namespace monkeyArea {
    export class Monkey {
      eat() { return 'Eat fruit' }
    }
  }
}
let p = new ();
(()); // Have a meallet t = new ();
(()); // Eat meatlet m = new ();
(()); // Eat fruit

3. The relationship between file module and namespace

File modules can be repeated. Multiple files exports have the same naming. The file modules are allowed to be independent and do not affect the global uniqueness of the namespace. The exported names cannot be repeated.

Supplement: Namespaces under the same module will be merged consistently; namespaces under the same name will not be merged

This is the article about the relationship and usage of TypeScript modules and namespaces. For more related contents of TypeScript modules and namespaces, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!