W3Schools Tryit Editor

// Namespace Aliases Example
// This demonstrates how TypeScript namespace aliases would be compiled in JavaScript

// Simulating a deeply nested namespace structure
var VeryLongNamespace;
(function (VeryLongNamespace) {
  var DeeplyNested;
  (function (DeeplyNested) {
    var Components;
    (function (Components) {
      // Button class
      Components.Button = class Button {
        display() {
          console.log("Button displayed");
        }
      };
      
      // TextField class
      Components.TextField = class TextField {
        display() {
          console.log("TextField displayed");
        }
      };
    })(Components = DeeplyNested.Components || (DeeplyNested.Components = {}));
  })(DeeplyNested = VeryLongNamespace.DeeplyNested || (VeryLongNamespace.DeeplyNested = {}));
})(VeryLongNamespace || (VeryLongNamespace = {}));

// Using the full namespace path (verbose)
console.log("Using full namespace path:");
const button1 = new VeryLongNamespace.DeeplyNested.Components.Button();
button1.display();

// In TypeScript, we would use namespace aliases:
console.log("\nIn TypeScript, we can create namespace aliases:");
console.log("import Components = VeryLongNamespace.DeeplyNested.Components;");

// Simulating what a namespace alias would do
const Components = VeryLongNamespace.DeeplyNested.Components;
console.log("Using namespace alias:");
const button2 = new Components.Button();
button2.display();

// In TypeScript, we can also alias a specific member:
console.log("\nIn TypeScript, we can alias specific members:");
console.log("import Button = VeryLongNamespace.DeeplyNested.Components.Button;");

// Simulating what a member alias would do
const Button = VeryLongNamespace.DeeplyNested.Components.Button;
console.log("Using member alias:");
const button3 = new Button();
button3.display();

// Demonstrate with the other component
console.log("\nUsing another component:");
const textField = new Components.TextField();
textField.display();

Using full namespace path:
Button displayed

In TypeScript, we can create namespace aliases:
import Components = VeryLongNamespace.DeeplyNested.Components;
Using namespace alias:
Button displayed

In TypeScript, we can alias specific members:
import Button = VeryLongNamespace.DeeplyNested.Components.Button;
Using member alias:
Button displayed

Using another component:
TextField displayed