How to fix Namespace must be imported or aliased using 'import as' in TypeScript

// Incorrect - will cause error
import { SomeFunction } from './my-namespace';

// Correct - use 'import as' for namespaces
import * as MyNamespace from './my-namespace';
// Then access with MyNamespace.SomeFunction

// Alternative: import specific members with alias
import { SomeFunction as MyFunction } from './my-namespace';

namespace MyNamespace {
  export const value = 42;
}

// Incorrect - direct reference
const x = value; // Error!

// Correct - use namespace qualifier
const x = MyNamespace.value;

// Also correct - import with 'import as' even in same file
import MyAlias = MyNamespace;
const y = MyAlias.value;

{
  "compilerOptions": {
    "module": "commonjs", // or "amd", "system", "umd"
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

// Old namespace style
namespace Utilities {
  export function helper() { /* ... */ }
}

// New ES6 module style
// utilities.ts
export function helper() { /* ... */ }

// consumer.ts
import { helper } from './utilities';

/// <reference path="./my-globals.d.ts" />

// Now you can use the namespace
const x = MyGlobalNamespace.someValue;

// my-globals.d.ts
declare namespace MyGlobalNamespace {
  export const someValue: string;
}

// Check file extensions
import * as MyNamespace from './my-namespace.ts'; // .ts extension
import * as MyNamespace from './my-namespace.js'; // .js extension in output

// Use path mapping in tsconfig.json for complex structures
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@namespaces/*": ["src/namespaces/*"]
    }
  }
}

// Then import
import * as MyNamespace from '@namespaces/my-namespace';