如何引入Node模块的TypeScript类型定义 解决vue-router4 RouteRecordRaw报错

解决方案 #

1. 优先使用显式类型导入（推荐）

vue-router 4 的类型默认未全局注册，直接在用到RouteRecordRaw的文件顶部导入类型即可解决问题：

import type { RouteRecordRaw } from 'vue-router'

该导入为类型专属导入，不会被打包到最终生产产物中，不会影响体积。

2. 排查依赖安装异常

如果显式导入仍报错，按如下步骤排查：

• 确认package.json中安装的是 vue-router 4.x 版本，适配 Vue 2 的 vue-router 3 不存在该类型
• 删除node_modules文件夹与对应包管理器锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）后重新执行安装命令，避免缓存导致的类型文件缺失

3. 全局注册类型（可选）

如果需要全局使用该类型、不想每个文件单独导入，可按如下配置：
在tsconfig.json的compilerOptions.types数组中加入vue-router即可，无需修改typeRoots配置：

{
  "compilerOptions": {
    "types": ["vue-router", "其他你需要全局加载的类型包"]
  }
}

注意：只要你配置了types字段，只有列在数组内的包的类型才会被TypeScript全局加载，未列出的包即使安装了也不会自动全局注册类型

如果需要用三斜杠注释全局注册，要将注释写在项目全局类型定义文件（如vite-env.d.ts/global.d.ts，且该文件需在tsconfig.include的覆盖范围内）中才会生效。

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