Vue/Vite项目导入Turf.js时TS类型声明无法找到的问题

环境与操作 #

• 依赖配置（package.json）：

"dependencies": {
   ...
    "@turf/turf": "6.5.0",
    "vue": "^3.3.11",
    ...
  },

• Vue3 Composition API + TS中的导入方式：

<script setup lang="ts">
import * as turf from "@turf/turf";
// 使用turf.bbox(...)
</script>

• 触发的TypeScript错误：

Could not find a declaration file for module '@turf/turf'. '/Users/.../node_modules/@turf/turf/dist/es/index.js' implicitly has an 'any' type.
There are types at '/Users/.../node_modules/@turf/turf/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@turf/turf' library may need to update its package.json or typings.ts(7016)

解决方案 #

1. 改用按需导入单个模块 #

Turf.js 6.x全量包的exports配置存在类型解析缺陷，推荐直接导入所需的单个功能模块：

<script setup lang="ts">
import { bbox } from "@turf/bbox";
// 直接调用bbox(...)
</script>

同时安装对应模块：

npm install @turf/bbox

2. 升级Turf.js到最新稳定版 #

6.5.0版本的exports与类型文件映射不兼容，升级到最新版（如7.x系列）可彻底解决该问题：

npm update @turf/turf

升级后可正常使用全量导入：

<script setup lang="ts">
import * as turf from "@turf/turf";
// 正常调用turf.bbox(...)
</script>

3. 临时修改本地依赖配置（应急方案） #

若无法升级或按需导入，可临时修改node_modules/@turf/turf/package.json的exports字段，补充类型文件映射：

"exports": {
  ".": {
    "types": "./index.d.ts",
    "import": "./dist/es/index.js",
    "require": "./dist/js/index.js"
  }
}

注：该修改会在依赖更新后被覆盖，仅作临时应急用。

4. 添加全局类型声明兜底 #

若以上方法均无效，可在项目src/types目录下创建turf.d.ts文件，手动声明模块类型：

declare module '@turf/turf' {
  export * from '@turf/turf/index.d.ts';
}

并在tsconfig.json中确保类型文件被包含：

"include": [
  "src/**/*",
  "src/types/**/*"
]

内容的提问来源于stack exchange，提问作者Alex M.