Property does not exist on type 'Window & typeof globalThis'. Even though it is defined in definition file

Question

This is global.d.ts

interface Window {
  routes: any;
  routeMaker: any;
  store: any;
  searchKey: string;
}

As far as I understand, anything is global.d.ts is essentially the same as

declare global {
  interface Window {
    routes: any;
    routeMaker: any;
    store: any;
    searchKey: string;
  }
}

Sitting in root, is the tsconfig.json in which I have pointed to the defination files..

{
  "compilerOptions": {
    "target": "es6",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "lib": ["es6", "dom", "webworker"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "jsx": "react",
    "typeRoots": ["node_modules/@types", "types"],
    "types": ["node", "webpack-env"],
    "downlevelIteration": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "exclude": ["**/*.spec.js", "node_modules", "vendor", "public"],
  "include": [
    "types/global.d.ts",
    "**/*.d.ts",
    "app/client/src",
    "app/*.ts"
  ],
  "compileOnSave": false
}

The include section points the definition file.

But when I use any props defined in the definition file..

window.routeMaker = {};

Property 'routeMaker' does not exist on type 'Window & typeof globalThis'.

What causes this? And how is this fixed?

Answer 1

You need to add at least one import or one export in order to make global.d.ts an external module to have a global scope effect, so in your case you can do the following:

declare global {
  interface Window {
    routes: any;
    routeMaker: any;
    store: any;
    searchKey: string;
  }
}
export {};