CODEWITHSUNDEEP
typescript
dudewad
dudewad

Reputation: 13943

Typescript: .d.ts file not recognized

This one's probably extremely simple but I'm going nuts trying to figure it out.

I have a very simple self-executing function in an outer index.ts file that needs to register a global variable on the window object. I want to assign it like so:

(() => {
  window.myCustomGlobal = new MyCustomGlobal();
})()

I created index.d.ts alongside index.ts:

import { MyCustomGlobal} from './classes';

declare interface Window {
  myCustomGlobal: MyCustomGlobal;
}

No errors in the above, all looks good. The application compiles fine.

In the IDE, however, I get an error: ts2339: Property 'myCustomGlobal' does not exist on type 'Window'

I can't for the life of me figure out what exactly makes Typescript "figure out" what .d.ts file to include. In certain libs, having a .d.ts file alongside a .js file causes it to get picked up, and it works fine. In fact, I used the exact same interface as above with a global third-party lib and it worked great; it just seems like my IDE won't pick it up.

I've tried adding index.d.ts to tsconfig.json in include as well as files with no luck.

Can somebody explain, as if to a child, what causes TS to pick up declaration files? Some days I feel like I get it, and then in stupid simple examples like this I feel like an idiot.

Thanks

Upvotes: 35

Views: 69022

Answers (6)

Marchant Khalid
Marchant Khalid

Reputation: 21

I encountered the same issue in my NodeJS project. I didn't have any import/export in my global.d.ts but still received the error "cannot find the name ..." I resolved this problem by adding "files: ["global.d.ts"]" in tsconfig.json.

tsconfig.json

{ 
  "compilerOptions": {....},
  "files": ["global.d.ts"],
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "global.d.ts"
  ] }

global.d.ts


interface UserToken {
  _id: string;
  email: string;
}

 namespace Express {
  interface Request {
    user: UserToken;
  }
}

and restart your IDE

Upvotes: 1

nicholas_randall
nicholas_randall

Reputation: 176

If you have an import statement in your .d.ts file, it will not work. Remove the import statement and its types should be globally available as expected.

Upvotes: 5

The.Wolfgang.Grimmer
The.Wolfgang.Grimmer

Reputation: 1351

On my end. I have to add DOM under lib in tsconfig.json so typescript compiler recognized window object.

Upvotes: -1

ford04
ford04

Reputation: 74760

There might be two issues here:

1.) You need to augment Window interface in global scope.

Either remove all import/export keywords to make the containing file a non-module/script. Or you can use declare global in a module to mark everything wrapped in it as global declaration:

import { MyCustomGlobal} from './classes';

declare global {
  interface Window {
    myCustomGlobal: MyCustomGlobal;
  }
}

2.) Equally named files, that only differ in their .ts/.d.ts extension, don't work. To quote the docs:

Please note that the compiler does not include files that can be possible outputs; e.g. if the input includes index.ts, then index.d.ts and index.js are excluded. In general, having files that differ only in extension next to each other is not recommended.

Make sure to give a different name to index.d.ts (like global.d.ts), so the compiler doesn't only pick index.ts. global.d.ts will included automatically, if placed somewhere in the TS project marked by tsconfig.json and if "files" and "include" config options are left unspecified.

Upvotes: 58

shamaseen
shamaseen

Reputation: 2488

This is just so weird, but, In order for it to work I needed to include the types folder in the include secion in the tsconfig.json

Upvotes: 4

GrabbenD
GrabbenD

Reputation: 520

We declared "include": ["src"] in our tsconfig.json and this caused declarations.d.ts in root ("/") to not be detected.

Upvotes: 27

Related Questions