开发时报错Property 'disabled' does not exist on type 'void'如何解决？

相关参考截图 #

• 事件代码截图：
• 报错信息截图：

报错本质 #

这是TypeScript类型校验阶段抛出的错误，核心原因是你尝试读取/修改一个void类型值的disabled属性：void类型代表没有任何返回值，不存在任何可访问的属性。

排查步骤 #

• 打开报错信息指向的代码行，找到所有访问.disabled属性的语句
• 确认你访问disabled的变量来源，如果该变量是某段函数调用的返回值，检查对应函数的返回类型标注与实际return逻辑

常见触发场景与修复 #

场景1：调用无返回值函数后尝试操作其返回属性 #

错误示例：

// 该函数无返回值，TS推断返回类型为void
function initBtn() {
  const btn = document.querySelector('#submit')
}

// 错误写法：访问void类型的disabled属性
initBtn().disabled = true

修复方案：给函数补充返回逻辑与正确类型标注

// 补充返回值与类型标注
function initBtn(): HTMLButtonElement {
  return document.querySelector('#submit') as HTMLButtonElement
}

initBtn().disabled = true

场景2：框架事件绑定时误调用函数后访问属性 #

以React为例的错误示例：

// 错误写法：直接调用handleClick（返回void）后尝试访问属性
<button onClick={handleClick().disabled = false}>提交</button>

修复方案：修正事件绑定逻辑，将函数引用传入事件属性，不要直接调用

// 正确写法
<button onClick={handleClick} disabled={false}>提交</button>

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