如何修复rd-component组件库的TypeScript类型声明解析错误？

我维护一个名为rd-component的公共组件库，在新项目中使用版本"rd-component": "^0.1.47"时，VS Code抛出如下TypeScript错误：

Could not find a declaration file for module 'rd-component'. '/Users/John/source/reddwarf/frontend/ppt-web/node_modules/.pnpm/rd-component@0.1.47_@types+node@20.1.1_react-dom@18.2.0_react-redux@8.0.5_react@18.2.0_vite@4.3.2/node_modules/rd-component/dist/rd-component.es.js' implicitly has an 'any' type.
  There are types at '/Users/John/source/reddwarf/frontend/ppt-web/node_modules/rd-component/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'rd-component' library may need to update its package.json or typings.ts(7016)

该库的package.json内容如下：

{
    "name": "rd-component",
    "version": "0.1.47",
    "type": "module",
    "description": "Reddwarf public component lib",
    "files": [
        "dist"
    ],
    "main": "./dist/rd-component.umd.js",
    "module": "./dist/rd-component.es.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "import": "./dist/rd-component.es.js",
            "require": "./dist/rd-component.umd.js"
        },
        "./dist/style.css": {
            "import": "./dist/style.css",
            "require": "./dist/style.css"
        }
    },
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "watch": "vite build --watch",
        "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview"
    },
    "devDependencies": {
        "@types/node": "^20.1.0",
        "@types/react": "^18.2.0",
        "@types/redux-logger": "^3.0.9",
        "axios": "^1.3.4",
        "js-wheel": "https://github.com/jiangxiaoqiang/js-wheel.git",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-redux": "^8.0.5",
        "redux": "^4.2.1",
        "redux-logger": "^3.0.6",
        "uuid": "^9.0.0",
        "vite": "^4.3.5"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.9.5",
        "@vitejs/plugin-react": "^4.0.0",
        "antd": "^5.4.6",
        "vite-plugin-dts": "^2.3.0"
    }
}

我知道旧版的typings字段能解决，但这不符合现代TypeScript配置，请问正确的解决方式是什么？

解决方案 #

问题核心：当package.json中配置了exports字段时，TypeScript会优先遵循该字段的模块解析规则，原来的顶层types字段会被忽略，导致类型文件无法匹配到对应的入口文件。

步骤1：修改package.json的exports字段 #

在exports的根入口（.）中添加types字段，将类型文件与对应的模块入口关联：

"exports": {
    ".": {
        "import": "./dist/rd-component.es.js",
        "require": "./dist/rd-component.umd.js",
        "types": "./dist/index.d.ts"
    },
    "./dist/style.css": {
        "import": "./dist/style.css",
        "require": "./dist/style.css"
    }
}

如果你的import和require入口共用同一类型文件，也可以把types放在入口的根层级，写法更简洁。

步骤2：验证类型文件有效性 #

确保dist/index.d.ts正确导出了所有组件、工具函数的类型定义，且文件路径与package.json中的配置完全一致。

步骤3：重新发布并更新依赖 #

将修改后的package.json和编译后的dist文件重新发布组件库新版本，在新项目中更新rd-component依赖后，TypeScript就能正确解析类型文件了。

补充：不需要删除原来的顶层types字段，它可以作为旧版TypeScript的兼容 fallback。

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