TypeScript开发Tauri时遇Event类型属性不存在等类型错误

你的问题核心是TypeScript的类型推断与DOM元素实际类型不匹配，下面拆解问题并给出修复方案：

原错误原因 #

1. foo_input.value报错：document.querySelector(".foo")默认返回Element | null，Element是所有DOM元素的基类，并不包含value属性（只有表单输入类元素如HTMLInputElement才有）。运行时因为JS不做类型检查能正常执行，但TypeScript会严格校验类型。
2. event.key报错：keydown事件的实际类型是KeyboardEvent，但TypeScript默认给Element的事件监听推断的是通用Event类型，Event没有key属性。

你第二次尝试出错的原因 #

你手动指定event: KeyboardEvent，但此时foo_input的类型是Element | null，TypeScript认为Element的keydown事件回调应该接收Event类型参数，和你指定的KeyboardEvent类型不兼容，因此抛出类型不匹配的错误。

修复代码 #

直接给querySelector指定泛型，明确元素是HTMLInputElement，TypeScript会自动推断事件类型和元素属性：

const foo_input = document.querySelector<HTMLInputElement>(".foo");

foo_input?.addEventListener("keydown", (event) => {
    if (event.key !== 'Enter') return;
    console.log(foo_input.value);
});

补充说明 #

• 泛型<HTMLInputElement>告诉TypeScript：我们确定这个选择器选中的是input元素，所以返回类型是HTMLInputElement | null，它包含value属性。
• 此时addEventListener的keydown事件会自动推断为KeyboardEvent，无需手动指定，event.key自然合法。
• 如果你偏好类型断言写法，也可以这样写（效果一致，但泛型更贴合TypeScript的类型系统设计）：

  const foo_input = document.querySelector(".foo") as HTMLInputElement | null;
  

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