TypeScript: Export React components as part of a namespace

Question

I have the following files:

AutosuggestComponent.tsx:

import * as React from 'react';

interface AutosuggestProps {
    ...
}    

interface AutosuggestState {
   ...
}

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

And I would like to import the Autosuggest component like this in ConsumerComponent.tsx:

import Autosuggest = Components.AutoSuggest;

How can I export AutosuggestComponent.tsx in order to make this work?

I have tried creating an Autosuggest.ts like this:

import AutosuggestComponent from './AutosuggestComponent';

namespace Components {
    export const Autosuggest = AutosuggestComponent;
}

which doesn't work. The ConsumerComponent then cannot find the namespace 'Components'. However, this works:

// import AutosuggestComponent from './AutosuggestComponent';

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

As soon as I comment out the import, the ConsumerComponent is able to find the namespace. Why?

Is there any way to work this out?

Community · Accepted Answer · 2017-05-23 11:54:03Z

3

You can reach the desired behavior by structuring your code in the following manner:

Add extra ts file named index.ts in the folder where all your components reside:

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

Then consume it from your ConsumerComponent.tsx:

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

The reason for it not working with import is due to the fact that by using import you are turning it into module (even though you are using namespace keyword) where 'Components' are not exported. And I would recommend try not to use namespaces at all, see here, and here

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 14, 2017 at 14:44

Amid

22.5k6 gold badges63 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

severin Over a year ago

Thanks for your reply. I can't seem to get this to work. When importing Components.AutoSuggest I get this errormessage: Property 'Autosuggest' does not exist on type 'typeof "c:/Projects/portal/Scripts/Shared/Components/index

Amid Over a year ago

Try to remove default from Autosuggest class definition, keep it like this: export class Autosuggest

Collin White Over a year ago

I believe this pattern is called a Barrel

aH6y · Accepted Answer · 2020-04-22 07:51:01Z

1

index.ts

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

export const C = {
  A,
  B,
}

using:

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

Typescript version 3.8.3

answered Apr 22, 2020 at 7:51

aH6y

4765 silver badges8 bronze badges

1 Comment

Moiz Sohail Over a year ago

An explanation would be better

Collectives™ on Stack Overflow

TypeScript: Export React components as part of a namespace

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related