reactjs - TypeScript: Exportar componentes de React como parte de un espacio de nombres

Tengo los siguientes archivos:

ComponenteAutosugerencia.tsx:

import * as React from 'react';

interface AutosuggestProps {
    ...
}    

interface AutosuggestState {
   ...
}

export default class Autosuggest extends React.Component<AutosuggestProps, AutosuggestState> {
    ...
}

Y me gustaría importar el componente Autosuggest así en ConsumerComponent.tsx:

import Autosuggest = Components.AutoSuggest;

¿Cómo puedo exportar AutosuggestComponent.tsx para que esto funcione?

He intentado crear un Autosuggest.ts así:

import AutosuggestComponent from './AutosuggestComponent';

namespace Components {
    export const Autosuggest = AutosuggestComponent;
}

lo cual no funciona. El ConsumerComponent entonces no puede encontrar el espacio de nombres 'Components'. Sin embargo, esto funciona:

// import AutosuggestComponent from './AutosuggestComponent';

namespace Components {
    export const Autosuggest = { dummyValue: "test" }
}

Tan pronto como comento la importación, el ConsumerComponent puede encontrar el espacio de nombres. ¿Por qué?

¿Hay alguna manera de resolver esto?

Respuesta #1

Puedes alcanzar el comportamiento deseado estructurando tu código de la siguiente manera:

Agrega un archivo ts adicional llamado index.ts en la carpeta donde residen todos tus componentes:

export * from './Autosuggest';
export * from './Combobox';

Luego consúmelo desde tu ConsumerComponent.tsx:

import * as Components from './components/index';
import Autosuggest = Components.AutoSuggest;

La razón por la que no funciona con import se debe al hecho de que al usar import lo estás convirtiendo en un módulo (aunque estés usando la palabra clave namespace) donde 'Components' no están exportados. Y recomendaría intentar no usar namespaces en absoluto, mira aquí, y aquí

Respuesta #2

index.ts

import { A } from './A.tsx';
import { B } from './B.tsx';

export const C = {
  A,
  B,
}

usando :

import { C } from './index';

<C.A/>
<C.B/>

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "noEmit": true
  }
}

Versión de Typescript 3.8.3