How to import `ts` modules in a `d.ts` file that uses `declare namespace`?

Question

I decided to declare all the types that I'll need across my project into a single d.ts file.

allTypes.d.ts

declare namespace PROJECT {

  interface MY_INTERFACE {
    // ...
  }

}

And just by declaring that namespace, I'm already able to use in all my project files as:

const something: PROJECT.MY_INTERFACE = {
  // ...
};

And this has been working so far.

But now I need to declare a new type that is based on a existing JS object.

@constants/COLLECTIONS.ts

export const COLLECTIONS = {
  PROP_A: "PROP_A",
  PROP_B: "PROP_B",
  PROP_C: "PROP_C",
};

So I had to do the following in my allTypes.d.ts file.

allTypes.d.ts

import { COLLECTIONS } from "@constants/COLLECTIONS";

declare namespace PROJECT {

  interface MY_INTERFACE {
    // ...
  }

  type SOME_TYPE = keyof typeof COLLECTIONS   // THIS IS WORKING FINE

}

The problem is that just by doing that import on the top-level of my allTypes.d.ts, my PROJECT namespace is no longer visible for the files of my project.

How can I solve this?

Wondering if you were ever able to find a workaround? – phil Jan 14 '21 at 21:22 — phil, Jan 14 '21 at 21:22

score 4 · Accepted Answer · answered Jan 14 '21 at 23:33

I researched this a little more and this solution works in my case https://stackoverflow.com/a/51114250/40769

Using import inline like the example below will still allow the use of script type .ts/.d.ts files.

declare namespace Express {
  interface Request {
    user: import("./user").User;
  }
}

This answer also had some useful context about the difference between a "script" and "module" ts file: https://stackoverflow.com/a/42257742/40769

How to import `ts` modules in a `d.ts` file that uses `declare namespace`?

1 Answers1