create-react-app typescript global.d.ts file doesn't work

Question

I've got my global.d.ts file in src folder like this

declare global {
  interface Window {
    config: {
      url: string;
    };
  }
}

Then somewhere in my components do

window.config = 'x';

And ts shows this error

Error:(10, 22) TS2339: Property 'config' does not exist on type 'Window'.

create-react-app is used for this app.

"react-scripts": "3.0.1",
"typescript": "3.5.3"

This is how tsconfig.json looks like

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

Dana Woodman · Accepted Answer · 2020-05-25 21:36:13Z

33

A simpler approach would be to export an empty object from your global.d.ts, like so:

declare global {
  interface Window {
    config: {
      url: string;
    };
  }
}

// Adding this exports the declaration file which Typescript/CRA can now pickup:
export {}

answered May 25, 2020 at 21:36

Dana Woodman

4,6322 gold badges43 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brandon Howard Over a year ago

Very nice zero-config approach.

JakeSidSmith · Accepted Answer · 2019-07-20 13:28:13Z

14

Provided your .d.ts file doesn't import or export anything, you can omit the declare global block.

You will need to make sure this file is either in an @types directory, or that you have configured your typeRoots to include the directory for your type declarations e.g.

{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types/",
      "./custom/path/to/declarations/"
    ]
  }
}

Some more info about this can be found here.

answered Jul 20, 2019 at 13:28

JakeSidSmith

9436 silver badges14 bronze badges

Comments

brogrammer · Accepted Answer · 2022-06-02 01:46:01Z

1

I encountered the same error, except in my case I want to declare my global types in a @types folder in my top-level directory.

I solved the error by adding the root to my tsconfig.json's include paths:

// in tsconfig.json

{
  "compilerOptions": {
    // ...
  },
  "include": [
    // ...
    "."   // adds root as an include path
  ]

}

answered Jun 2, 2022 at 1:46

brogrammer

8741 gold badge12 silver badges23 bronze badges

Collectives™ on Stack Overflow

create-react-app typescript global.d.ts file doesn't work

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related