React+Typescript, About namespace

Question

I defined the class Header in the header.tsx file and put it in the BizComponent namespace.

The footer.tsx file defines the class Footer and is also placed in this namespace.

How do I import this namespace so that it contains both classes?

Thank you in advance for your answer.

---

UPDATE:

header.tsx :

import React from 'react';
export namespace BizComponent {
  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 BizComponent.Header;

footer.tsx :

import React from 'react';
namespace BizComponent {
  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 BizComponent.Footer;

then import them...

import { BizComponent } from './header.tsx';
// ERROR: TS 2300
// import { BizComponent } from './footer.tsx';

I'm looking for a way to replace this bad design...

Answer 1

You have to import them separately using their relative file paths.

One way to accomplish something similar is given in Importing a directory in React