TypeScript：將 React 組件導出為命名空間的一部分

Question

我有以下文件：

AutosuggestComponent.tsx：

import * as React from 'react';

interface AutosuggestProps {
    ...
}    

interface AutosuggestState {
   ...
}

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

我想在 ConsumerComponent.tsx 中像這樣導入 Autosuggest 組件：

import Autosuggest = Components.AutoSuggest;

我如何導出 AutosuggestComponent.tsx 以使其工作？

我試過像這樣創建一個 Autosuggest.ts：

import AutosuggestComponent from './AutosuggestComponent';

namespace Components {
    export const Autosuggest = AutosuggestComponent;
}

這不起作用。 然后 ConsumerComponent 找不到命名空間“Components”。 但是，這有效：

// import AutosuggestComponent from './AutosuggestComponent';

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

一旦我注釋掉導入，ConsumerComponent 就能夠找到命名空間。 為什么？

有沒有辦法解決這個問題？

Answer 1

您可以通過以下方式構建代碼來達到所需的行為：

在所有組件所在的文件夾中添加名為 index.ts 的額外 ts 文件：

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

然后從你的 ConsumerComponent.tsx 消費它：

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

它不與import一起工作的原因是因為通過使用 import 你將它變成了模塊（即使你使用了命名空間關鍵字），其中“組件”沒有被導出。 我建議盡量不要使用命名空間，請參閱此處和此處

Answer 2

索引.ts

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

export const C = {
  A,
  B,
}

使用：

import { C } from './index';

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

配置文件

{
  "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
  }
}

打字稿版本 3.8.3