TypeScript：“EventTarget & Element”类型上不存在“已检查”属性。为什么它不存在？答案

【问题标题】：TypeScript: Property 'checked' does not exist on type 'EventTarget & Element'. Why it doesn't exist?TypeScript：“EventTarget & Element”类型上不存在“已检查”属性。为什么它不存在？
【发布时间】：2019-07-14 20:13:11
【问题描述】：

我收到此错误

错误：(17, 35) TS2339：“EventTarget & Element”类型上不存在“已检查”属性。

但这绝对是不可能的错误，因为 React 文档说 checked 确实存在于复选框的 target 上 (https://reactjs.org/docs/forms.html#handling-multiple-inputs)

这是我的代码。怎么回事，TS炸了？

// I specify a type for event. It must have `checked` property.
  onToggle = (ev: React.ChangeEvent) => {
    console.log('[ev]', ev.target.checked); // <= TS throws here
  }

  render() {
    return (
      <div>
        <input type="checkbox" name="switch" id="switch" onChange={ev => this.onToggle(ev)} checked={this.state.on}/>
      </div>
    )
  }

其他错误消息：

TS2339：“EventTarget”类型上不存在“已检查”属性。

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

这是一个修复。你必须指定ChangeEvent元素的类型

  onToggle = (ev: React.ChangeEvent<HTMLInputElement>) => {
  // onToggle = (ev: React.ChangeEvent) => {
    console.log('[ev]', ev.target.checked); // <= TS throws here
  }

  render() {
    return (
      <div>
        <input type="checkbox" name="switch" id="switch" onChange={ev => this.onToggle(ev)} checked={this.state.on}/>
      </div>
    )
  }

【讨论】：

或者ev.target['checked'] 绕过属性检查...

【解决方案2】：

看看这个，我目前将这种方式应用到我的项目中。

  onToggle = (ev: React.ChangeEvent<HTMLInputElement>) => {
    console.log('[ev]', (ev.target as HTMLInputElement).checked);
  }

  render() {
    return (
      <div>
        <input type="checkbox" name="switch" id="switch" onChange={onToggle} checked={this.state.on}/>
      </div>
    )
  }

顺便说一句，我认为您应该尝试useState 来获取/设置checked 值的状态。例如：

const [checked, setChecked] = useState(false)

const onToggle = (ev: React.ChangeEvent<HTMLInputElement>) => {
        setChecked((ev.target as HTMLInputElement).checked);
    };

...

 render() {
    return (
      <div>
        <input type="checkbox" name="switch" id="switch" onChange={onToggle} checked={checked}/>
      </div>
    )
  }

【讨论】：

【解决方案3】：

你可以说它是 any 类型 - 写 (event: any)。适用于任何地方（在functions、onClick 属性等...）。

【讨论】：