TypeScript: Exporting complex interface

Question

please have a look at code below:

enum ActionTypeEnum {
  GET_WAREHOUSE_ITEM_LIST_INITIAL = 'GET_WAREHOUSE_ITEM_LIST_INITIAL',
  GET_BASKET = 'GET_BASKET',
}    
interface Action {
    type: ActionTypeEnum,
}

export {ActionTypeEnum};  // works fine
export {Action};          //Cannot re-export a type when the '--isolatedModules' flag is provided.

As far as I understand it is possible to export ActionTypeEnum because it does not depend on anything.
As far as I understand it is not possible to export Action because it uses ActionTypeEnum and cannot be exported on it's own.

Please tell me how to export Action and if my understanding of the problem is correct.

Thank you! :-)

Shaun Luttin · Accepted Answer · 2020-03-14 22:32:43Z

3

This GitHub issue explores the topic. The compiler complains when:

we use isolatedModules and
we use export { SomeThing } with either a type or an interface.

This happens because, with isolated modules, each module is isolated, which makes it hard for transpilers like babel to decide whether SomeThing has a JavaScript representation. If SomeThing is a class, a function, or an object, then the transpiler needs to represent it in JavaScript. On the other hand, if SomeThing is a type or an interface, then the transpiler must not represent it in JavaScript.

What to do?

One option is an inline export interface SomeThing { } statement like this:

enum ActionTypeEnum1 {
  // ...
}

export interface Action1 { // <-------- inline export
  type: ActionTypeEnum1;
}

export { ActionTypeEnum1 };

If you are using TypeScript 3.8+, another option is to use export type { SomeThing } like this:

enum ActionTypeEnum2 {
  // ...
}

interface Action2 {
  type: ActionTypeEnum2;
}

export type { Action2 } // <-------- export type { }
export { ActionTypeEnum2 }

edited Mar 14, 2020 at 22:32

answered Mar 14, 2020 at 20:19

Shaun Luttin

143k93 gold badges442 silver badges495 bronze badges

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

5 Comments

Jacek Wojcik Over a year ago

I get 'Action2' only refers to a type, but is being used as a value here. error now :-(

Shaun Luttin Over a year ago

@JacekWojcik What version of TypeScript are you running? export type { } syntax requires TypeScript 3.8 or greater.

Jacek Wojcik Over a year ago

>tsc --version Version 3.8.3

Jacek Wojcik Over a year ago

I am using VS Code, dependencies: "typescript": "^3.8.3"

Shaun Luttin Over a year ago

@JacekWojcik I am not sure how else I can help. Perhaps you could push a simple example to a GitHub repository to help us reproduce the error. In the meantime, here is the example in the playground: typescriptlang.org/play?#code/…

Collectives™ on Stack Overflow

TypeScript: Exporting complex interface

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related