如何解决赛普拉斯和 jQuery 的类型标识符冲突？答案

【问题标题】：How do I resolve conflicting type identifiers for Cypress and jQuery?如何解决赛普拉斯和 jQuery 的类型标识符冲突？
【发布时间】：2021-09-22 22:18:28
【问题描述】：

我的任务是为 Angular 11 应用程序编写 E2E 打字稿测试。我的测试设置反映了他们的best practices。我现在面临的问题是该应用程序具有一些现有的 jQuery 类型依赖项（3.5.1），而 Cypress（8.4.1）有自己的全局 jQuery（3.3）类型定义，它们相互冲突，我得到以下运行时出错：

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

应用程序编译并运行，但每个路由请求 /request 都会导致错误 Cannot get /request。我还观察到，如果我强制它重新编译（使用 compile-on-save 和虚拟代码），那么它会在产生相同的运行前错误后完美运行。

关于我的设置的详细信息：

/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"
    ]
  }
}

我得到的错误：

所以我的问题是：

如何解决类型冲突问题？
为什么第二次可以，第一次不行？

到目前为止我尝试过的事情都没有成功：

为每个和两个都添加了 skipLibcheck。
根据docs 配置 tsconfig 来解决此问题
尝试使用 cypress 的 tsconfig 在主 tsconfig 和 jquery 中 exclude cypress

【问题讨论】：

标签： jquery angular typescript cypress

【解决方案1】：

我想出了解决办法。选项 3 是正确的答案，即：（尝试在主 tsconfig 和 jquery 中排除 cypress 与 cypress 的 tsconfig）。

为未来的人们发布新的 tsconfig 文件：

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>;
  }
}

帮助我解决这个问题的链接：

【讨论】：