1. TypeScript namespace

1. TypeScript namespace creation and simple use

The namespace mainly solves the problem of duplicate names. The namespace defines the visible range of the identifier. An identifier can be defined in multiple namespaces, and its meaning in different namespaces is irrelevant. In this way, any identifiers can be defined in a new namespace, and they will not conflict with any existing identifiers, because the existing definitions are in other namespaces.

Create the speak.ts file

namespace Speak { 
    export interface peopleSpeak { 
        speakFun():any; 
    }
}

When the classes and interfaces in the namespace need to be called externally, you need to add the export keyword to the classes and interfaces

2. The namespace is in a separate TypeScript file, which can be referenced with triple slashes ///, and the syntax is as follows:

/// <reference path = "speak.ts" />

Create the speak1.ts file

/// <reference path = "speak.ts" /> 
namespace Speak { 
    export class SpeakHello implements peopleSpeak { 
        public speakFun() { 
            console.log("Hello"); 
        }  
    }
}

Create the speak2.ts file

/// <reference path = "speak.ts" /> 
namespace Speak { 
    export class SpeakTs implements peopleSpeak { 
        public speakFun() { 
            console.log("ts"); 
        } 
    } 
}

Create oneSpeak.ts file

/// <reference path = "speak.ts" />   
/// <reference path = "speak1.ts" /> 
/// <reference path = "speak2.ts" />  
function drawAllShapes(speak:Speak.peopleSpeak) { 
    speak.speakFun(); 
} 
drawAllShapes(new Speak.SpeakHello()); //Hello
drawAllShapes(new Speak.SpeakTs()); //ts

2. Simple use of nested namespaces

Namespace supports nesting, you can define a namespace in another namespace, use export to export the namespace

Create oneNest.ts file

namespace XiaoGuai { 
    export namespace Sam { 
       export class Speak { 
          public speakTs(oneStr: string) { 
             return oneStr; 
          } 
       } 
    } 
 }

Create oneSpeak.ts file

/// <reference path = "oneNest.ts" />
let oneStr = new XiaoGuai.Sam.Speak(); 
console.log(oneStr.speakTs("hello ts")); //hello ts

2. TypeScript module

1. TypeScript module creation and simple use

The module is executed in its own scope, not in the global scope. The variables, functions and classes defined in the module are not visible outside the module. If you use it, you can use export to export them . And import variables, functions, classes, etc. exported by other modules through import . The relationship between two modules is established by using import and export at the file level.

Modules use module loaders to import other modules. At runtime, the role of the module loader is to find and execute all dependencies of this module before executing the code of this module. Such as CommonJS for Node.js and Require.js for serving web applications.

Create hello.ts file

export interface peopleSpeak {
    speakFun(): any;
}

Create the helloClass.ts file

import hello = require("./hello"); 
export class helloClass implements hello.peopleSpeak { 
   public speakFun() { 
      console.log("hello"); 
   } 
}

Create the doHello.ts file

import hello = require("./hello"); 
import helloClass = require("./helloClass"); 

function doHelloFun(helloClass: hello.peopleSpeak) {
    helloClass.speakFun(); 
 } 
  
 doHelloFun(new helloClass.helloClass()); //hello

If you have any questions, please comment below and I will answer them for you.

TypeScript namespaces and TypeScript modules

1. TypeScript namespace