React+TypeScript项目onKeyUp事件target属性不存在，参数e应设什么类型

你混淆了React.KeyboardEventHandler（事件处理函数类型）和React.KeyboardEvent（事件对象类型）的定义：React.KeyboardEventHandler<HTMLInputElement>是整个键盘事件处理函数的类型，你把它赋值给了函数参数e（也就是事件对象），自然会提示找不到target属性。

有两种常用的正确类型标注方式：

方式1：直接给事件对象标注类型 #

参数e的正确类型是React.KeyboardEvent<HTMLInputElement>，这是input元素触发的键盘事件对象的标准类型：

import React from 'react';

import styles from './styles.module.scss';

export function Step3() {
    function handleKeyUp(e: React.KeyboardEvent<HTMLInputElement>) {
        // 推荐用currentTarget，指向绑定事件的input元素，类型更准
        console.log(e.currentTarget.value);
        // 如果必须用target，需要加类型断言
        console.log((e.target as HTMLInputElement).value);
    }

    return (
        <div className="d-flex justify-content-between">
            <input
                type="text"
                className="f-size-30 mt-3"
                name="name"
                placeholder="Type your name"
                onKeyUp={handleKeyUp}
            />
        </div>
    );
}

方式2：给整个处理函数标注类型 #

直接把React.KeyboardEventHandler<HTMLInputElement>赋值给函数本身，参数e的类型会自动推导，不需要手动标注：

const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
  console.log(e.currentTarget.value);
}

• 访问事件关联元素属性时优先用currentTarget，它永远指向绑定事件监听的元素（此处就是input），不需要额外类型断言。
• target指向实际触发事件的元素，可能出现嵌套元素触发的场景，必须加类型断言才能访问input的专属属性。

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