时间戳

首页 > 解决方案 > 当没有为该单个值定义类型时，如何从库中导入

typescript - 当没有为该单个值定义类型时，如何从库中导入

问题描述

我正在开发一个使用 react-spring 的组件库的项目。我无法控制组件库，因此我无法控制它使用 react-spring v8 的事实

我在 PR 上找到了一条评论，告诉我在测试环境中运行时如何修复动画。它需要我导入Globals对象。当我尝试这样做时，import { Globals }我收到错误消息Module '"react-spring"' has no exported member 'Globals'.ts(2305)，因为我的项目正在使用 Typescript（其中的说明适用于 JS）

当我查看我的 node_modules 目录中 react-spring 的代码时，我可以看到该Globals对象肯定是在主代码和模块代码中导出的。

web.js（主要）：

export { apply, config, update, extendedAnimated as animated, extendedAnimated as a, interpolate$1 as interpolate, Globals, useSpring, useTrail, useTransition, useChain, useSprings };

web.cjs.js（模块）：

exports.Globals = Globals;

但是，当我查看react-spring 提供的类型时，什么都没有Globals，我担心这是导致我无法导入 Globals 的原因，以便我可以在测试期间按照指示提供模拟 requestAnimationFrame。

我对 Typescript 很陌生，所以我可能误解了一些东西，我已经尝试用谷歌搜索解决方案，但我几乎只能找出如何处理一个完全没有类型但没有任何关于如何修复“库中提供的类型。

这是一个显示相同错误的 CodeSandbox（必须正在编辑沙箱。在预览模式下不显示。

编辑 zen-morning-5843r

标签： typescriptreact-spring

解决方案

这看起来像一个 Typescript 错误，react-spring@8因为是的，Globals已导出。如果您有兴趣针对 v8 分支进行 PR，我们可以发布此修复程序。

如果您想立即修复，可以添加以下内容：

declare module "react-spring" {
  interface Globals {
    injectFrame: () => void;
  }

  export const Globals: Globals;
}

通常到一个*.d.ts文件或只是你需要它的地方。这将为您提供所需的功能，您可以继续在需要的地方添加更多功能。否则你可以// @ts-expect-error用来静音错误。

这是一个展示解决方案的沙箱 – https://codesandbox.io/s/admiring-frog-5enu2?file=/src/App.tsx

推荐阅读