如何在typescript-eslint/no-namespace下声明Cypress自定义命令的类型？

Question

Cypress文档展示了如何声明自定义命令类型：

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Custom command to select DOM element by data-cy attribute.
       * @example cy.dataCy('greeting')
       */
      dataCy(value: string): Chainable<Element>
    }
  }
}

但是TypeScript ESLint对此感到不满，原因是“ES2015模块语法优于自定义TypeScript模块和命名空间@typescript-eslint/no-namespace”。 是否有可能将其重写为import/export，如果可以，该如何操作？或者我应该禁用此规则来处理这种情况吗？

- Alexey Romanov

---

那么，你认为文档有误吗？当你尝试移除命名空间时发生了什么？ - user16695029

我认为文档没有考虑到这个规则，因为它不是 TypeScript 的一部分。如果我删除 namespace Cypress 这一行，我希望它会声明一个与 Cypress.Chainable 无关的新的 Chainable 接口，所以我不能在 Cypress.Chainable 值上调用该方法；或者你是指其他什么？（我现在无法尝试，但如果你认为有用的话，稍后可以尝试。） - Alexey Romanov

你尝试使用 allowDeclarations = true 吗？默认是 false。同时，你是否尝试过以不同的方式创建一个带有 <declare module> 语法的单独的 d.ts 文件，并在 .ts 文件中直接使用它：///<reference path="../typings/custom/your.d.ts" />，而不是将其放在全局上下文中？ - Navoneel Talukdar

Answer 1

根据此规则，@typescript-eslint/no-namespace规则允许在定义文件中使用具有自定义TypeScript名称空间的declare关键字。

因此，您可以创建一个cypress.d.ts定义文件，并将Custom Commands/Assertions的类型从support文件中移至该文件中：

// ./cypress.d.ts

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    dataCy(value: string): Chainable<Element>
  }
}

您可能需要在项目中的任何tsconfig.json文件的包含选项中包含*.d.ts，以便TypeScript能够识别新类型：

// tsconfig.json

"include": [
  "src",
  "./cypress.d.ts"
]

点击此处了解更多信息。

- Hafez Divandari