How do I resolve conflicting type identifiers for Cypress and jQuery?

Question

My task is to write E2E typescript tests for an Angular 11 app. My test setup reflects their best practices. The problem I am facing is right now is that the app has some existing jQuery type dependencies (3.5.1) and Cypress (8.4.1) has its own global jQuery(3.3) type definitions which conflict with one another and I get the following error during runtime:

error TS6200: Definitions of the following identifiers conflict with those in another file: TypeOrArray, Node, htmlString...

The app compiles and runs but each routing request /request results in the error Cannot get /request. I have also observed that if I force it to recompile (using compile-on-save with dummy code) then it works perfectly after producing the same pre-runtime error.

Details about my setup:

/cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "include": [
    "./**/*.ts"
  ],
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es5",
      "dom"
    ],
    "types": [
      "cypress", // this was supposed to ignore jquery types conflicts as per docs
      "cypress-localstorage-commands",
    ]
  }
}

tsconfig.json

{
  "compileOnSave": true,
  "include": [
    "...", // other stuff
    "**/*.d.ts",
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "exclude": [
    "node_modules/cypress/*",
    "cypress/support/index.d.ts"
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types",
      "./@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

The error I get:

So my questions are:

1. How do I fix the conflicting types issue?
2. Why does it work the second time but not the first?

Things I tried thus far without success:

1. Added skipLibcheck to each and to both.
2. Configured tsconfig as per their docs to solve this issue
3. Tried to exclude cypress within main tsconfig and jquery with cypress's tsconfig

Answer 1

I figured out the solution. Option 3 was the right answer namely: (Tried to exclude cypress within main tsconfig and jquery with cypress's tsconfig).

Posting the new tsconfig files for future folks:

cypress/tsconfig.ts

{
  "extends": "../tsconfig.json",
  "include": [
    "./**/*.ts"
  ],
  "exclude": [],
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "ES2015",
      "es5",
      "dom"
    ],
    "types": [
      "cypress"
    ]
  }
}

tsconfig.ts

{
  "compileOnSave": false,
  "include": [
    "...",
    "@types/index.d.ts", // Had to specify exact file here instead of wild card. Else jquery is also included.
  ],
  "exclude": [
    "cypress/global.d.ts" // important to exclude this.
  ],
  "compilerOptions": {
    ...,
    "typeRoots": [
      "node_modules/@types",
      "./@types"
    ],
  }
}

cypress/global.d.ts

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {

    customCommand1(args: any): Chainable<Element>;

    customCommand2(args: any): Chainable<Element>;
  }
}

Links that helped me figure this out:

1. cypress issue
2. namespaces in ts
3. tsconfig docs