Typescript React 事件处理程序类型

Question

使用下面的代码，我尝试将我的组件转换为 Typescript 失败。

我遇到的问题在于handleChange 函数中的event.target 类型似乎没有正确的属性？如果我将其更改为内联箭头函数，我可以看到类型推断是 React.ChangeEvent<HTMLInputElement>，因此事件类型看起来是正确的。

我的反应类型是"@types/react": "^16.8.23",

import * as React from "react";

export default class SignIn extends React.Component<SignInProps, SignInState> {
    constructor (props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

        this.state = {
            email: '',
            password: ''
        };
    }

    handleChange(event: React.ChangeEvent<HTMLInputElement>) {
        const type = event.target.type; // Property 'type' does not exist on type 'EventTarget & HTMLInputElement'.
        const value = event.target.value; // Property 'value' does not exist on type 'EventTarget & HTMLInputElement'.
        // do other stuff
    }

    async handleSubmit(event) {
        // do stuff
    }

    render () {
        return (
            <form id="sign-in" onSubmit={this.handleSubmit}>
                <input onChange={this.handleChange} placeholder="Email address" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
                <input onChange={this.handleChange} placeholder="Password" type="password" />
                <input type="submit" />
            </form>
        );
    }
}

我注意到，如果我点击进入我看到的定义

interface EventTarget { }
interface Document { }
interface DataTransfer { }
interface StyleMedia { }

interface Element { }

interface HTMLElement extends Element { }
... excluded for brevity
interface HTMLInputElement extends HTMLElement { }

这些都是空的正常吗？这可能是它认为没有类型的原因吗？

Answer 1

当项目中没有包含 dom 库时，ReactNative 的类型定义为空。在针对浏览器的 React 项目中，这些类型来自 dom 库。

您可能忘记将 dom 库添加到您的 tsconfig.json 文件中，请确保将其包含在此文件中：

{
    "compilerOptions": {
        "lib": ["dom", "dom.iterable", "esnext"],
        // ...
}