TypeScript拖拽功能开发中e.dataTransfer.setData被标记为any类型的问题咨询

我之前也碰到过一模一样的情况，这其实是TypeScript类型守卫的一个小陷阱，咱们一步步拆解解决办法：

方法1：先确认dataTransfer存在，再调用方法 #

你当前的条件判断if (e.dataTransfer.setData)有两个问题：一是如果e.dataTransfer为null，访问setData会直接触发运行时错误；二是TypeScript没法从这个判断里正确收窄dataTransfer的类型，只能把它标记为any。

正确的做法是先检查dataTransfer是否存在，再调用方法：

if (!(e.target instanceof HTMLLIElement)) return;
// 先确保dataTransfer不是null，再调用setData
if (e.dataTransfer) {
  e.dataTransfer.setData('text/plain', '123'); // 这里不会再提示any类型了
}

方法2：类型断言（仅在确定上下文时使用） #

如果你100%确定当前场景下e.dataTransfer不可能为null，可以用类型断言强制告诉TypeScript它的真实类型：

if (!(e.target instanceof HTMLLIElement)) return;
(e.dataTransfer as DataTransfer).setData('text/plain', '123');

不过这种方式跳过了TypeScript的类型检查，非必要不推荐使用。

问题根源解析 #

当你写if (e.dataTransfer.setData)时，TypeScript无法从这个表达式推断出e.dataTransfer不是null——因为null.setData本身是非法操作，TypeScript会把整个表达式的类型判定为any，所以就会弹出“调用any类型值”的提示。而直接检查e.dataTransfer是否存在时，TypeScript会自动把它的类型从DataTransfer | null收窄为DataTransfer，这时setData的正确类型就会被识别了。

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