TypeScript: "Cannot use namespace as a type"

Question

Note: All other issues here on SO that I've found are Angular related and/or have an entirely different setup than this.

---

I have the following setup:

inner/action.ts:

export type MyAction = string;

inner/functions.ts

import { MyAction } from "./action";

const identity = (action: MyAction): string => action;

export {
    identity
};

inner/index.ts

import * as MyAction from "./functions";

export { MyAction };
export * from "./action";

usage.ts

import { MyAction } from "./inner";

const action: MyAction = "";
//            ^___ error is here

Error: Cannot use namespace 'MyAction' as a type

Though IntelliJ offers to navigate to that place in code.

Why is it not allowed to use this the same name in both cases and what can I do to have them both with the same name?

Answer 1

The problem here is in inner/index.ts
by doing:

import * as MyAction from "./functions";

export { MyAction };

what you're doing is exporting a namespace called MyAction which includes all exports of function.ts
This means that the value of MyAction exported by inner/index.ts is

{
    identity: (action)=>action
}

this value overrides the value of MyAction exported from action.ts in the line

export * from "./action";

instead what you need to do is

export * from "./functions";
export * from "./action";

This will export both identity and MyAction without any renaming or namespacing