如何在不将其转换为模块的情况下在`d.ts` 文件中导入类型（从另一个文件）？

Question

Just ran into a weird situation regarding d.ts files and namespaces.

I have some d.ts files where I declare and merge a namespace named PROJECT .

See below how it's declared and automatically merged (across multile files):

file1.d.ts ----- file2.d.ts ----- file3.d.ts

declare namespace PROJECT {

  interface SOME_INTERFACE {
    ...
  }

  type SOME_TYPE = SOME_UNION_TYPE

  // ETC
}

That PROJECT namespace is automatically accessible from every file of my project. Example:

SomeComponent.tsx

const someVariable: PROJECT.SOME_INTERFACE = { 
  // ... 
};

This is all expected behavior.

My problem started when I decided to declare another namespace.

ADMIN_BLOGPOST.d.ts

import type { ACTION_THUNK_GENERIC } from "@hooks/useReducerThunk";

declare namespace ADMIN_BLOGPOST {
  // HERE I DECLARE MULTIPLE TYPES
  // AND ONE OF THE TYPES USES THE `ACTION_THUNK_GENERIC` TYPE, WHICH IS BEING IMPORTED HERE

  type ACTION_THUNK = ACTION_THUNK_GENERIC<ACTION,GET_STATE>
}

And just because of that top-level import type of the ACTION_THUNK_GENERIC , now my namespace is not automatically available anymore.

VSCode started to consider ADMIN_BLOGPOST.d.ts as a module and started making me have to import that namespace before using it, like:

SomeComponent.tsx

import type { ADMIN_BLOGPOST } from "@src/types/ADMIN_BLOGPOST";

const someVariable: ADMIN_BLOGPOST.ACTION_THUNK

Note that if I remove that top-level import (the one that imports ACTION_THUNK_GENERIC ) from the ADMIN_BLOGPOST.d.ts file, then my ADMIN_BLOGPOST namespace becomes available without the need to import it first.

But I really need that import. Because I need the ACTION_THUNK_GENERIC type so I can build the non-generic ACTION_THUNK type.

Is there a different way to do this so my ADMIN_BLOGPOST namespace is available without having to import it before using? Ie: How to import inside a d.ts file without turning it into a module?

Answer 1

Use declare global to work in a global namespace irrespective of module imports. For example:

import type { ACTION_THUNK_GENERIC } from "@hooks/useReducerThunk";
declare global {
  declare namespace ADMIN_BLOGPOST {
    type ACTION_THUNK = ACTION_THUNK_GENERIC<ACTION,GET_STATE>
  }
}

Alternatively you can use a dynamic import:

declare namespace ADMIN_BLOGPOST {
  type ACTION_THUNK = import("@hooks/useReducerThunk").ACTION_THUNK_GENERIC<ACTION,GET_STATE>
}