Cypress 9.0.0升级后string无法赋值给keyof Chainable报错如何解决

Cypress 9.0.0版本强化了Chainable接口的TypeScript类型校验规则，所有调用的Cypress命令必须预先在类型声明中注册，未声明的自定义命令会被判定为非法字符串参数，触发你遇到的类型不匹配报错。

• 第一步：进入cypress/support目录，新建index.d.ts类型声明文件，如果项目已有该文件直接编辑即可。
• 第二步：在index.d.ts中扩展Cypress全局命名空间下的Chainable接口，将你所有的自定义命令按照参数、返回值规则补充类型声明，参考示例如下：

declare namespace Cypress {
  interface Chainable<Subject = any> {
    // 替换下方示例为你自己的自定义命令声明
    // 示例：自定义login命令，接收用户名密码两个字符串参数，无返回值
    login(username: string, password: string): Chainable<void>
    // 示例：自定义getByTestId命令，接收测试ID字符串参数，返回DOM元素
    getByTestId(testId: string): Chainable<JQuery<HTMLElement>>
  }
}

• 第三步：检查项目根目录的tsconfig.json配置，确保include字段已经覆盖了上述声明文件路径，参考配置如下：

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

• 第四步：重启IDE或TypeScript语言服务，类型报错即可消除，所有自定义命令可正常调用。

如果你的项目无需TypeScript校验，也可以临时在报错行上方添加// @ts-ignore注释跳过单条校验，不影响代码运行。

内容的提问来源于stack exchange，提问作者Oleh Dymych