Home > Blockchain >  Adding `import` statement to `global.d.ts` destroys type and module declarations
Adding `import` statement to `global.d.ts` destroys type and module declarations

Time:03-04

In my Next.js web project, my types/global.d.ts starts like this:

declare module 'react-zeroconfig-components'

interface Product {
  ...
}

I’m using openapi-typescript to generate types from my Swagger OpenAPI definitions, but when I import my generated swagger.ts file:

import { definitions } from 'types/swagger'

declare module 'react-zeroconfig-components'

interface Product {
  ...
}

…none of the other types/interfaces in global.d.ts work any longer:

Type error: Cannot find name 'Product'.

and also the declare module stops working:

Could not find a declaration file for module 'react-zeroconfig-components'

What is wrong here?

CodePudding user response:

Using import makes the file a module and no longer an ambient type declaration file. To fix this, use the exotic import function syntax:

type SomethingCool = import("types/swagger").definitions;

This is because if you import something and hover over it:

import mod from "cool-module";

You will probably see that the editor (at least VSCode) displays import("cool-module") as the type.

So here we'll use this to mitigate the use of a static import keyword.

  • Related