TypeScript迁移后出现Property 'then' does not exist on type 'Text'报错如何解决

问题根因 #

• JS是动态类型语言，运行前不会做类型校验，只要运行时getIDHome返回的是带then方法的Cypress链式对象，就能正常执行
• TS是静态类型语言，你在类型声明里标注的方法名、返回类型均存在错误，原生Text是DOM文本节点的类型，本身没有then方法，TS在编译阶段就会抛出类型错误。

具体修复步骤 #

1. 修复自定义命令类型声明 #

修改../support/index.ts的类型定义：

declare namespace Cypress{
  interface Chainable<Subject = any>{
    // 修正方法名、返回类型，基础类型用小写string，返回Cypress.Chainable<string>
    getIDHome(Row: string, ID: string): Chainable<string>;
  }
}

之前的代码存在两处错误：声明的方法名是getHome和实际定义的getIDHome不匹配；返回类型错写为Text，Cypress自定义命令始终返回Cypress.Chainable<T>泛型类型，T是你实际返回的值的类型，这里你返回的是文本内容所以对应string。

2. 修复自定义命令的实现逻辑 #

修改../support/commands.js的代码，补全return语句，删除无效代码：

Cypress.Commands.add('getIDHome', (Row, ID) => {   
  // 必须return整个命令链，才能把返回值传给外层调用
  return cy.get('[class^="'+Row+'"]').then($Container=>{
    const isID = $Container.find('[class^="'+ID+'"]', {timeout:2000}).get(0)
    // 删除多余的无效代码Text，return wrap的结果
    return cy.wrap(isID.innerText);
  })
})

之前的代码没有return任何内容，且末尾多了无意义的Text字符，会导致实际运行时返回值不符合预期。

3. 简化getID方法（可选优化） #

Cypress的命令链本身就是类Promise结构，不需要你额外包一层Cypress.Promise，可以直接简化为：

getID(){ 
  cy.wait(3000)
  return cy.getIDHome(Row, ID).then((value)=>{
    const idStr = value.toString();
    Cypress.env('ID', idStr);
    cy.log(idStr + ' :: adding ID in global variable ')
    return idStr;
  })
}

调用这个方法的时候可以直接用.then接收返回值，和你之前包Promise的用法完全一致。

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