When working with a custom hook from React DnD, I encounter an issue where TypeScript restricts my access to the property of an item object in the drop function due to its unknown type.
function MyComponent(props){
const [{item}, drop] = useDrop({
accept: "BLOCK",
collect: monitor => ({
item: monitor.getItem() // Item object collected here IDropTargetMonitor
}),
drop: (): void => setBlock_name(item.block_name) // /!\ Object [item] is of type 'unknown'
})
return ...
}
The module's corresponding interface is as follows :
export interface DropTargetMonitor<DragObject = unknown, DropResult = unknown>
I specify the contents of the item object in this section :
const OtherComponent = (props) => {
const [{isDragging}, drag] = useDrag({
type: "BLOCK",
item: {blockName: props.blockName}, // blockName is a string
collect: monitor => ({
isDragging: monitor.isDragging()
})
})
return ...
}
If anyone has any ideas on how I can infer the item type, I would greatly appreciate the assistance.