Incorrect type of DropItem on useDrop

[magoz]

Using onDrop with the new useDrop hook, doesn't infer correctly the DropItem type when using typescript.

Here is a codesandbox that demonstrates the issue. It's using the same code as the example from the official docs.

I've fixed it using a type guard, here is the working codesandbox, but basically:

function isFileDropItem(dropItem: DropItem): dropItem is FileDropItem {
  return (dropItem as FileDropItem).kind === 'file'
}

And then filtering out the files like so:

async onDrop(e) {
      let item = e.items.find(isFileDropItem); // item is now correctly typed as FileDropItem
      if (item) {
        setFile(URL.createObjectURL(await item.getFile()));
      }

Is there a reason useDrop can't infer the DropItem type correctly without having to write a guard manually?
Or am I missing something?

Loving the new hook! Great work! 🙌

[devongovett]

The kind of the items isn't known until runtime when the user drops, so not sure it could be inferred without something like the above. Unfortunately, TypeScript isn't smart enough to handle something like e.items.find(i => i.kind === 'file') without a separate type guard function like you have defined.

[magoz]

Thanks! That makes sense. I was thinking that maybe there was a way of doing it internally and then exposing the already 'guarded' versions of DropItem. For example:

async onDrop(e) {
      console.log(e.files) // FileDropItem[]
}