Cypress 12.5.1配置cypress-sql-server遇TypeScript类型错误求助

问题原因 #

cypress-sql-server没有官方提供TypeScript类型定义包，@types/cypress-sql-server根本不存在，所以TypeScript无法识别插件扩展出来的db属性，才会报Property 'db' does not exist on type 'PluginConfigOptions'错误。

解决步骤 #

1. 新建自定义类型声明文件 #

在你的Cypress项目的cypress/support目录下，创建一个cypress-sql-server.d.ts文件（也可以直接用已有的index.d.ts），写入以下代码：

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

declare namespace Cypress {
  // 扩展插件配置的类型，让TS识别db属性
  interface PluginConfigOptions {
    db?: {
      query: (sql: string, params?: any[]) => Promise<any>;
      // 如果你用到插件的其他方法，也可以在这里补充类型
    };
  }

  // 扩展Cypress命令类型，让cy.db()不报错
  interface Chainable {
    db(sql: string, params?: any[]): Chainable<any>;
  }
}

如果不想太精细，直接把db设为any也能快速解决报错：db?: any;

2. 让TypeScript识别这个声明文件 #

打开项目根目录的tsconfig.json，检查include数组里是否包含了Cypress的声明文件路径，确保加上这一行：

{
  "compilerOptions": {
    // 你的原有配置
  },
  "include": [
    "src/**/*",
    "cypress/**/*.ts",
    "cypress/support/*.d.ts" // 确保这个路径被包含
  ]
}

3. 验证配置和命令 #

现在回到cypress.config.ts的插件配置代码，比如这样的写法就不会再报类型错误了：

import { defineConfig } from 'cypress';
import sqlServer from 'cypress-sql-server';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      sqlServer.loadDBPlugin(config);
      return config;
    },
  },
});

在e2e.ts里注册命令后，cy.db()也会正常被TypeScript识别。

额外提示 #

不用再尝试安装@types/cypress-sql-server了，这个包不存在，404是正常情况。如果后续需要更严谨的类型，可以对照cypress-sql-server的源码，把db对象的方法类型补全即可。

内容的提问来源于stack exchange，提问作者David Grandfield