TypeScript中如何导入第三方库实际导出但类型未声明的单个值

解决方案 #

你遇到的报错是react-spring v8官方类型定义漏写Globals导出导致的，运行时代码实际存在该导出，仅类型检测不通过，可通过以下两种方式解决： #

方法1：快速临时绕过（适合仅少数地方使用的场景） #

不直接导入Globals，改用全量导入后通过类型断言获取：

import * as reactSpring from 'react-spring'
const Globals = (reactSpring as any).Globals
// 后续可正常使用Globals对象

方法2：补充类型定义（适合多处使用、追求类型规范的场景） #

1. 在项目src目录下新建react-spring.d.ts类型声明文件
2. 写入以下内容补充Globals的类型声明：

declare module 'react-spring' {
  // 可根据你实际用到的Globals属性补充更精准的类型定义
  export const Globals: {
    requestAnimationFrame: (callback: FrameRequestCallback) => number
    cancelAnimationFrame: (handle: number) => void
    now: () => number
    [key: string]: any
  }
}

3. 确认你的tsconfig.json的include配置包含了该声明文件，默认配置下src目录下的所有.d.ts文件都会被自动识别，无需额外修改。

配置完成后即可正常使用import { Globals } from 'react-spring'导入，不会再报2305错误。 #

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