TypeScript: Property 'X' does not exist on 'Window & typeof globalThis': suggested solution using 'declare global' gives me error

Question

Edit: This is an ESlint problem. I've included my ESLint setup at the end of this post.

I'm fairly new to TypeScript -- I have been refactoring someone else's React code, moving it to TypeScript for a work project when I ran into this line

        const memoryOptionsResponse = window.webchatMethods.getMemory(chatId);

TypeScript complains about 'window.webchat', saying

Property 'X' does not exist on 'Window & typeof globalThis

After some googling, the answer would seem to be to put this at the root level of the module

declare global {
    interface Window {
        webchatMethods:any;
    }
}

However now TS complains with the following error.

This Stack Overflow page suggests something similar, but again it has declare global and ESLint balks.

After half an hour trying to fix this, I've decided to turn to you for advice -- if anyone knows a good solution, I'd appreciate it!

// .eslintconfig
{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "extends": [
    "eslint:recommended",
    "prettier",
    "plugin:react/recommended"
  ],
  "plugins": [
    "prettier",
    "react",
    "react-hooks"
  ],
  "env": {
    "es6": true,
    "node": true,
    "mocha": true,
    "browser": true
  },
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/prop-types": 1,
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "react/no-unescaped-entities": "warn",
    "react/no-find-dom-node": 0,
        "comma-dangle": ["error", "never"],
    "global-require": 0
  }
}

// .eslintignore
test
node_modules

Eslint balks, but does typescript compile and seem to recognize the additional property? — Donovan Hiland, Feb 03 '20 at 18:05
Yes, It compiles. But I'd prefer that ESLint were happy so that I don't have spurious errors come up, and I don't know what eslint disable command to ñut before the line so that it stops signaling the error... — Cerulean, Feb 04 '20 at 12:05
Sure. I ask because then the answer (and problem) lies with eslint and not typescript. Can you share information on your eslint setup? — Donovan Hiland, Feb 04 '20 at 23:32
@DonovanHiland, I've included it at the end of the original post... — Cerulean, Feb 06 '20 at 13:35
@DonovanHiland -- I have none. Is there a standard config you can recommend? — Cerulean, Feb 07 '20 at 13:41

score 0 · Answer 1 · answered Feb 07 '20 at 17:08

0

It looks like what's missing is the piece that tells babel how to deal with typescript. I would check out typescript-eslint.

answered Feb 07 '20 at 17:08

Donovan Hiland

1,439
11
18

TypeScript: Property 'X' does not exist on 'Window & typeof globalThis': suggested solution using 'declare global' gives me error

Edit: This is an ESlint problem. I've included my ESLint setup at the end of this post.

1 Answers1