所以下面的代码在 Angular 4 中，我不明白为什么它不能按预期的方式工作。
这是我的处理程序的片段：
onUpdatingServerName(event: Event) {
console.log(event);
this.newserverName = event.target.value; //this wont work
}
HTML 元素：
<input type="text" class="form-control" (input)="onUpdatingServerName($event)">
代码给了我错误：
类型“EventTarget”上不存在属性“value”。
但正如可以看出，该console.log值确实存在于event.target.
event.target这里是一个HTMLElement是所有的HTML元素的父，但不保证具有这样的性质value。TypeScript 检测到这一点并抛出错误。演员event.target到相应的HTML元素，以确保它HTMLInputElement里面确实有一个value特性：
(<HTMLInputElement>event.target).value
根据文档：
输入
$event上面的示例将 转换
$event为any类型。这需要付出代价来简化代码。没有类型信息可以揭示事件对象的属性并防止愚蠢的错误。[...]
现在
$event是一个特定的KeyboardEvent. 并非所有元素都具有value属性，因此它会转换target为输入元素。
（强调我的）
将 HTMLInputElement 作为泛型传递给事件类型也应该起作用：
onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
console.log(event);
this.newserverName = event.target.value;
}
这是另一个对我有用的修复：
(event.target as HTMLInputElement).value
这应该通过让 TS 知道它event.target是 an来消除错误HTMLInputElement，它本质上具有value. 在指定之前，TS 可能只知道event只有一个HTMLInputElement，因此根据 TS 键入的target是一些随机映射的值，可以是任何东西。
我正在寻找解决类似 TypeScript 错误的 React 方法：
TypeScript 中的 EventTarget 类型不存在属性“数据集”
我想event.target.dataset在 React 中找到一个点击的按钮元素：
<button
onClick={onClickHandler}
data-index="4"
data-name="Foo Bar"
>
Delete Candidate
</button>
以下是我如何dataset通过 TypeScript使值“存在”：
const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
const { name, index } = (event.target as HTMLButtonElement).dataset
console.log({ name, index })
// do stuff with name and index…
}
我这样做的方式如下（比类型断言更好）：
onFieldUpdate(event: { target: HTMLInputElement }) {
this.$emit('onFieldUpdate', event.target.value);
}
这假设您只对target属性感兴趣，这是最常见的情况。如果您需要访问 的其他属性event，更全面的解决方案涉及使用&类型交集运算符：
event: Event & { target: HTMLInputElement }
这是一个 Vue.js 版本，但这个概念适用于所有框架。显然，您可以更具体，而不是使用一般性，HTMLInputElement您可以使用例如HTMLTextAreaElementtextareas。