React+TypeScript中如何导入包含Header与Footer的BizComponent命名空间？

当前写法的核心问题 #

1. 在ES模块环境下，两个文件里的BizComponent是完全独立的命名空间，不会自动合并成一个包含Header和Footer的统一命名空间。
2. 同时导出命名空间和默认组件的方式，既不符合ES模块规范，也会导致导入时的类型冲突（你遇到的TS 2300错误就源于此）。

推荐方案：ES模块规范拆分+统一导出（React/TS项目标准写法） #

这种方式既符合现代前端模块规范，也能实现类似“命名空间”的分组效果，同时避免类型问题。

步骤1：修改组件文件，直接导出组件

• header.tsx：移除命名空间，直接导出Header组件

import React from 'react';

export class Header extends React.Component {
  render(): React.ReactNode {
    return (
      <nav className='header-nav'>
        <a className='left' href='/'>
          <img className='header-logo' src='/logo.png' aria-label='logo' />
        </a>
        <div className='right'>
          <a href='/article'>Article</a>
          <a href='/about'>About</a>
        </div>
      </nav>
    );
  }
}

export default Header; // 可选保留默认导出，不影响后续使用

• footer.tsx：同理，直接导出Footer组件

import React from 'react';

export class Footer extends React.Component {
  render(): React.ReactNode {
    return (
      <div>
        <p className='footer'>
          Copyright &copy; 2022 (example). All rights reserved.
        </p>
      </div>
    );
  }
}

export default Footer; // 可选保留默认导出

步骤2：创建统一入口文件，实现“命名空间”分组

在组件目录下创建index.ts（或biz-components.ts），将两个组件统一导出为一个对象，模拟命名空间效果：

import { Header } from './header';
import { Footer } from './footer';

export const BizComponent = {
  Header,
  Footer
};

// 同时导出单个组件，支持按需导入
export { Header, Footer };

步骤3：导入使用

现在可以直接导入统一的BizComponent对象，或者按需导入单个组件：

// 方式1：导入整个BizComponent对象
import { BizComponent } from './biz-components';

const App = () => {
  return (
    <div>
      <BizComponent.Header />
      <main>内容区域</main>
      <BizComponent.Footer />
    </div>
  );
};

// 方式2：按需导入单个组件
import { Header, Footer } from './biz-components';

const App = () => {
  return (
    <div>
      <Header />
      <main>内容区域</main>
      <Footer />
    </div>
  );
};

不推荐方案：强行合并命名空间（仅作知识补充） #

如果一定要使用TypeScript命名空间的方式，需要将命名空间声明为全局或通过模块合并实现，但这种方式在ES模块环境下非常不直观，容易引发类型问题，不推荐在React项目中使用：

1. 创建.d.ts声明文件（比如biz-components.d.ts）：

declare namespace BizComponent {
  export class Header extends React.Component {}
  export class Footer extends React.Component {}
}

export { BizComponent };

2. 修改组件文件，将命名空间导出为全局：

// header.tsx
import React from 'react';

declare global {
  namespace BizComponent {
    class Header extends React.Component {
      render(): React.ReactNode;
    }
  }
}

BizComponent.Header = class Header extends React.Component {
  render(): React.ReactNode {
    // ... 组件内容
  }
};

export default BizComponent.Header;

这种写法繁琐且不符合React项目常规实践，因此更推荐第一种ES模块方案。

内容的提问来源于stack exchange，提问作者typed-sigterm