Cypress结合TypeScript使用时自定义命令报TS2339错误如何解决？

• 你写的Cypress类型扩展属于全局声明，当commands.ts文件中存在任意顶级import/export语句时，该文件会被TypeScript识别为独立模块，模块内的类型声明默认不会和全局的Cypress类型定义合并，因此测试文件无法识别你扩展的clickByLinkText方法。
• 也有可能是tsconfig.json没有正确包含commands.ts文件，导致类型声明未被TypeScript加载。

方案1：把类型声明改为模块内的全局扩展 #

如果你的commands.ts确实需要用到顶级import/export（比如导入其他工具函数），就在类型声明外层包裹declare global块：

// commands.ts
// 如果你有其他import语句写在最顶部，比如：
// import { someUtil } from '../utils'

declare global {
  namespace Cypress {
    interface Chainable {
      clickByLinkText(link: string): Chainable<Element>;
    }
  }
}

Cypress.Commands.add("clickByLinkText", (link: string) => {
  cy.get("a").contains(link).click();
});

注意：加了declare global之后，当前文件必须至少有1个顶级的export/import语句才能生效，如果没有的话可以在文件末尾加一行export {}。

方案2：移除不必要的顶级import #

如果commands.ts里的import语句是多余的，直接删除该import即可，此时文件属于全局脚本作用域，内部的namespace Cypress声明会自动和全局的Cypress类型合并。

方案3：检查tsconfig.json配置 #

确保你的Cypress专属tsconfig.json的include数组包含了commands.ts所在的路径，示例配置参考：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

配置修改后重启TypeScript服务即可生效。

内容的提问来源于stack exchange，提问作者Doctor Who