遗留TypeScript文件改造：替换namespace/module为ES6外部模块

Hey! Let's figure out how to fix those TypeScript warnings and update your legacy code to modern ES6 module standards—this is a super common migration, so I'll walk you through it step by step.

First, let's recap your original code structure that's triggering the warnings:

export namespace MySpace {
  export module MyModule {
    export interface MyInterface { }
    export class MyClass { }
    // ... other members
  }
}

Quick Context #

Those warnings are TypeScript's way of telling you:

• The module keyword was deprecated years ago
• Nested internal namespace/module syntax isn't the standard for organizing code anymore—ES6 modules (file-based encapsulation) are the modern replacement.

Step-by-Step Migration #

1. Remove Redundant Nested Wrappers

Your inner MyModule is totally unnecessary in ES6 modules. Here are two clean ways to refactor:

Option A: Export Members Directly (Cleanest Approach)

ES6 modules use files as their core unit of isolation, so you can ditch all nested namespace/module blocks and export your members straight from the file:

// my-module.ts
export interface MyInterface { }
export class MyClass { }
// ... export other members directly here

When importing elsewhere, you grab exactly what you need without nested access:

import { MyInterface, MyClass } from './my-module';

// Use them directly
const myInstance = new MyClass();

Option B: Keep a Single Namespace (For Grouping)

If you want to retain the MySpace grouping for readability (though this is less common in modern code), flatten the structure by removing the inner module:

// my-space.ts
export namespace MySpace {
  export interface MyInterface { }
  export class MyClass { }
  // ... other members
}

Import and use like this:

import { MySpace } from './my-space';

const myInstance = new MySpace.MyClass();

2. Split into Multiple Files (For Larger Codebases)

If your module has lots of members, splitting into dedicated files is even more maintainable—this is the standard ES6 module pattern:

• my-interface.ts

  export interface MyInterface { }
  

• my-class.ts

  export class MyClass { }
  

• index.ts (a "barrel" file to export everything from one convenient place)

  export * from './my-interface';
  export * from './my-class';
  

Then import from the barrel file:

import { MyInterface, MyClass } from './index';

Why This Works #

• ES6 modules are the industry standard now, supported by all modern browsers and toolchains (Webpack, Vite, etc.).
• File-based modules eliminate the need for nested namespace/module blocks because each file's exports are scoped to that module by default.
• You'll eliminate both warnings entirely by ditching the deprecated module keyword and adopting modern module organization.

内容的提问来源于stack exchange，提问作者mrt