时间戳

首页 > 解决方案 > 在打字稿的声明文件中增加命名空间

typescript - 在打字稿的声明文件中增加命名空间

问题描述

我正在尝试将命令添加到赛普拉斯命名空间。我创建了一个commands.d.ts文件：

从'axe-core'导入{ElementContext，RunOptions}；从'axe-core'导入{结果}；

export type ViolationCallback = (violations: Result[]) => void;

declare namespace Cypress {
  interface Chainable<Subject = any> {
    checkA11yAndReportViolations(context?: ElementContext, options?: RunOptions): void;
    checkA11yLocal(context?: ElementContext, options?: RunOptions, violationCallback?: ViolationCallback): void;
  }
}

我的tsconfig.json样子是这样的：

{
  "compilerOptions": {
    "baseUrl": "../node_modules",
    "target": "es6",
    "isolatedModules": false,
    "module": "commonjs",
    "types": [
      "cypress",
      "node"
    ]
  },
  "include": [
    "integration/**/*.ts",
    "support/*.ts",
    "../node_modules/cypress"
  ]
}

我的 commands.d.ts 文件位于support上面包含的文件夹中，但是当我尝试调用函数时integration/spec.ts：

cy.checkA11yAndReportViolations();

tsc 抱怨：

“Chainable”类型上不存在属性“checkA11yAndReportViolations”。

标签： typescript

解决方案

对我来说没问题，也许你忘了实现接口

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "../node_modules",
    "target": "es6",
    "isolatedModules": false,
    "module": "commonjs",
    "types": [
      "cypress",
      "node"
    ]
  },
  "include": [
    "integration/**/*.ts",
    "support/*.ts",
    "../node_modules/cypress"
  ]
}

集成/spec.ts

import { Cypress } from '../support/commands'

export class Demo implements Cypress.Chainable {
  checkA11yAndReportViolations () {
    console.log('CALLED checkA11yAndReportViolations')
  }
  checkA11yLocal () {
    console.log('CALLED checkA11yLocal')
  }
}

支持/commands.d.ts

import { ElementContext, RunOptions } from 'axe-core';
import { Result } from 'axe-core';

export type ViolationCallback = (violations: Result[]) => void;

declare namespace Cypress {
  interface Chainable<Subject = any> {
    checkA11yAndReportViolations(context?: ElementContext, options?: RunOptions): void;
    checkA11yLocal(context?: ElementContext, options?: RunOptions, violationCallback?: ViolationCallback): void;
  }
}

索引.ts

import { Demo } from './integration/spec'

const d = new Demo()

d.checkA11yAndReportViolations()

结果

~/Documents/Dev/github/demo
❯ ts-node ./index.ts
CALLED checkA11yAndReportViolations

推荐阅读