W3Schools Tryit Editor

// Nested Namespaces Example
// In a browser or non-module environment, TypeScript namespaces compile to nested JavaScript objects

// This simulates how nested namespaces would be compiled in JavaScript
var App;
(function (App) {
  // Create Utils namespace inside App
  let Utils;
  (function (Utils) {
    // Exported functions in Utils
    Utils.log = function(msg) {
      console.log(`[LOG]: ${msg}`);
    };
    
    Utils.error = function(msg) {
      console.error(`[ERROR]: ${msg}`);
    };
  })(Utils = App.Utils || (App.Utils = {}));
  
  // Create Models namespace inside App
  let Models;
  (function (Models) {
    // Exported class in Models
    Models.UserService = class UserService {
      getUser(id) {
        // In a real app, this would fetch from API or database
        return { id: id, name: "John Doe", email: "john@example.com" };
      }
    };
  })(Models = App.Models || (App.Models = {}));
})(App || (App = {}));

// Using nested namespaces
App.Utils.log("Application starting");

const userService = new App.Models.UserService();
const user = userService.getUser(1);

App.Utils.log(`User loaded: ${user.name}`);

// Demonstrate error handling
try {
  // Simulate an error condition
  const invalidUser = userService.getUser(null);
} catch (e) {
  App.Utils.error("Failed to load user");
}

// In TypeScript, this would be a compile-time error
try {
  // App.log("directly accessing log");
  console.log("This would be a type error in TypeScript:");
  console.log("App.log('directly accessing log'); // Error - log is not a direct member of App");
} catch (e) {
  console.error("Error:", e.message);
}