正确的Typescript类型on:change handler在Svelte

Question

我有这样的代码:

<select class="form-control" on:change={pathChanged}>

pathChanged的签名为:

function pathChanged(event: { target: HTMLSelectElement }) {

当我使用npm run check通过tsc运行时，我得到这个错误:

Error: Type '(event: { target: HTMLSelectElement; }) => void' is not assignable to type 'FormEventHandler<HTMLSelectElement>'.
Types of parameters 'event' and 'event' are incompatible.
Type 'Event & { currentTarget: EventTarget & HTMLSelectElement; }' is not assignable to type '{ target: HTMLSelectElement; }'.
Types of property 'target' are incompatible.
Type 'EventTarget | null' is not assignable to type 'HTMLSelectElement'.
Type 'null' is not assignable to type 'HTMLSelectElement'. (ts)
<select class="form-control" on:change={pathChanged}>

pathChanged应该有什么特征?

Answer 1

事件target比您希望的更不具体¹。在这种情况下，我通常在函数中使用类型断言来解决这个问题。

function pathChanged(event: Event) {
const target = event.target as HTMLSelectElement;
// ...
}

虽然错误说明currentTarget应该正确输入，所以使用它应该也可以:

function pathChanged(event: { currentTarget: HTMLSelectElement })

如果事件具有比Event更具体的类型，例如MouseEvent，则可以使用&将这些类型组合起来:

function onMouseUp(event: MouseEvent & { currentTarget: HTMLSelectElement })

_{¹这样做的原因是大多数事件冒泡和target通常可以是元素中带有处理程序的任何元素。currentTarget总是引用带有处理程序的元素，因此可以确定地键入。}

Answer 2

我设置了一个输入类型为file:

// added this interface
interface FormEventHandler<T> {
target: EventTarget | null;
}
// then in the function
const onChangeFile = async (event: FormEventHandler<HTMLInputElement>) => {
const target = event.target as HTMLInputElement;
// your code
}