Cypress+TypeScript设置TinyMCE内容报类型错误如何解决

这个报错的核心原因是 TypeScript 默认的 Window 类型定义里没有 TinyMCE 挂载到全局的 tinymce 属性，按以下两步操作即可修复：

1. 补充全局类型声明 #

在 Cypress 项目的支持目录（通常是 cypress/support/ 路径下）找到或新建类型声明文件（命名为 cypress.d.ts 即可），写入以下类型扩展代码：

declare global {
  interface Window {
    tinymce: {
      editors: Record<string, {
        setContent: (content: string): void
      }>
    }
  }
}

declare namespace Cypress {
  interface Chainable<Subject = any> {
    setTinyMceContent(tinyMceId: string, content: string): Chainable<void>
  }
}

export {}

这段代码做了两件事：一是给全局 Window 类型补充 tinymce 属性的类型定义，二是给自定义Cypress命令补充类型，避免在测试用例里调用 cy.setTinyMceContent() 时TS报命令不存在的错误。

2. 优化自定义命令实现 #

原来的实现没有等TinyMCE编辑器初始化完成就直接取实例，容易出现运行时错误，调整为带等待逻辑的版本：

Cypress.Commands.add('setTinyMceContent', (tinyMceId: string, content: string) => {
  cy.window().should('have.property', 'tinymce').then((win) => {
    expect(win.tinymce.editors[tinyMceId]).to.exist
    win.tinymce.editors[tinyMceId].setContent(content)
  })
})

额外排查点 #

如果写完还是报类型错误，检查项目根目录的 tsconfig.json，确认 include 配置项已经覆盖了Cypress目录下的所有 .ts、.d.ts 文件，保证TypeScript能扫描到你写的类型声明。
如果项目本地已经安装了TinyMCE的官方npm依赖，也可以直接引入TinyMCE自带的官方类型，不用手动写简化的编辑器类型定义。

内容的提问来源于stack exchange，提问作者Wai Yan Hein