如何在React中对ChangeEvent与DragEvent进行类型收窄？

我需要编写一个接收两种不同React事件类型的函数，参数类型为React.ChangeEvent<HTMLInputElement>或React.DragEvent<HTMLDivElement>，请问该如何对这个联合类型进行类型收窄？

初始函数代码如下：

function test(e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) {
    console.log(e)
}

我尝试过用typeof来判断类型，但显然这种方式行不通。我原本想直接通过类型名称来区分，比如这样写：

function test(e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) {
    if (typeof e === 'React.ChangeEvent<HTMLInputElement>') {
        const files = e.target.files;
    } else {
        const files = e.dataTransfer;
    }
} 

最终我找到了可行的解决方案：利用TypeScript的属性存在性检查来区分两种类型，代码如下：

function test(e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) {
    if ('files' in e.target) {
        console.log(e.target.files);
    } else if ('dataTransfer' in e) {
        console.log(e.dataTransfer);
    }
}

内容的提问来源于stack exchange，提问作者Identikit