我想使用 React 和 TypeScript 定义一个包含一对事件处理程序名称和事件处理程序的对象,这样我就可以传递一个对象数组,例如
{
eventHandlerName: 'onBlur',
eventHandler: (e: React.FocusEvent<HTMLInputElement>) => { /* something */},
}
我尝试将此类型定义为
type SpecifiedEventHandler<I, E extends keyof React.DOMAttributes<I>> = {
eventHandlerName: E,
handlerFunction: React.DOMAttributes<I>[E];
};
这样调用它
const myObject: SpecifiedEventHandler<HTMLInputElement, keyof React.DOMAttributes<HTMLInputElement>>[] = {
[
{
eventHandlerName: 'onBlur',
handlerFunction: (e: React.FocusEvent<HTMLInputElement>) => { /* something */},
},
/* more here */
]
};
但问题是这限制不够。我可以通过'foobar'
作为handlerFunction
并且编译得很好。
我在这里缺少什么?关键是我想要handlerFunction
字段类型为React.DOMAttributes<HTMLInputElement>
其名称对应于 eventHandlerName
.
谢谢!
最佳答案
问题是数组元素的类型是SpecifiedEventHandler<HTMLInputElement, keyof React.DOMAttributes<HTMLInputElement>>
这意味着E
将是keyof React.DOMAttributes<HTMLInputElement>>
所以handlerFunction
将是React.DOMAttributes<HTMLInputElement>[keyof React.DOMAttributes<HTMLInputElement>>]
所以基本上任何值都可以是 React.DOMAttributes<HTMLInputElement>
的属性值这将有很多类型,包括 {}
所以任何类型都将与 handlerFunction
兼容.
如果您为 E
指定更具限制性的类型您将得到所需的错误,但可能不会得到具有多种事件类型的数组的所需功能:
const myObject: SpecifiedEventHandler<HTMLInputElement, 'onBlur'>[] =
[
{
eventHandlerName: 'onBlur',
handlerFunction: '(e: React.FocusEvent<HTMLInputElement>) => { /* something */},'
},
]; // Error
const myObjectOk: SpecifiedEventHandler<HTMLInputElement, 'onBlur'>[] =
[
{
eventHandlerName: 'onBlur',
handlerFunction: (e: React.FocusEvent<HTMLInputElement>) => { /* something */},
},
]; // Ok
您可以创建一个辅助函数来验证数组中的每个条目,您需要为每个项目手动调用它:
function event<I, E extends keyof React.DOMAttributes<I>>(event: SpecifiedEventHandler<I, E>) : typeof event {
return event;
}
const myObject: SpecifiedEventHandler<HTMLInputElement, keyof React.DOMAttributes<HTMLInputElement>>[] =
[
// Fun trick I is inferred based on return type
event({
eventHandlerName: "onBlur",
handlerFunction: (e: React.FocusEvent<HTMLInputElement>) => { /* something */},
}),
// Error eventHandlerName not ok
event({
eventHandlerName: "onBlur2",
handlerFunction: (e: React.FocusEvent<HTMLInputElement>) => { /* something */},
}),
// Error handlerFunction not ok
event({
eventHandlerName: "onBlur",
handlerFunction: '(e: React.FocusEvent<HTMLInputElement>) => { /* something */}',
}),
];
关于javascript - 如何在 TypeScript 中定义由事件处理程序名称和事件处理程序组成的类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50228278/