reactjs - 当多个存在时，打字稿如何决定使用哪个 JSX.IntrinsicElements 定义？

Question

我正在用打字稿构建一个 ReactJS 应用程序。我在特定的 TSX 文件中遇到编译器错误，因为它认为我的 onMouseDown 处理程序的类型不正确：

Type '(event: MouseEvent<Element, MouseEvent>) => void' is not assignable to type '(event: MouseEvent<HTMLDivElement>) => void'

根据我的调查，问题似乎是由于反应版本不匹配造成的。似乎此 MouseEvent 处理程序的类型在较新的反应版本中发生了变化。

当然，我的应用程序依赖于 react 以及 @types/react。但是，我的应用程序还依赖于另一个我们称之为“foo”的包。如果我查看我的 node_modules 目录中的 'foo' 目录，'foo' 也有它自己的 node_modules 目录，它下面有一个 @types/react —— 一个比我的应用程序直接依赖的那个更旧的目录。

当我尝试从 TSX 文件的函数中返回元素时，它似乎正在使用foo 下 node_modules 目录下的旧JSX.IntrinsicElements 接口的定义。但是，看起来 ReactElement（我的函数返回的类型）的定义来自较新的JSX.IntrinsicElements。因此，存在冲突，因为旧类型与新 ReactElement 类型（特别是 MouseEvent）的定义不匹配。

我通过更改我的函数来进一步验证我的理论，改为使用 React.createElement("div"...) 返回 div 并消除错误，因为那里使用“React”明确引用了我的 tsx 的 React 包在顶部导入的文件——因此避开了来自 JSX.InstrincicElements 的任何类型的自动查找。

所以我的问题是——打字稿（和 VS 代码）如何决定当存在多个 JSX.IntrinsicElements 定义时使用哪个？有没有办法让它使用来自明确列为我的项目依赖项的 react 包中的一个，而不是恰好位于另一个模块下的一个，而该模块恰好也使用了 react 类型？

谢谢！

标签： reactjstypescriptjsx