导入自定义npm包时Intellisense功能失效问题求助

问题出在哪 #

Intellisense靠TypeScript的.d.ts类型定义文件识别组件Props，你的包构建后要么没生成正确的类型文件，要么没把类型入口暴露给外部项目。而Storybook里能正常提示，是因为它直接读源码里的TypeScript类型，绕开了构建后的类型处理环节。

怎么解决 #

1. 修正TypeScript配置 #

在UI包的tsconfig.json里，必须开启以下关键配置：

{
  "compilerOptions": {
    "declaration": true, // 强制生成.d.ts类型文件
    "declarationDir": "./dist/types", // 指定类型文件输出目录
    "emitDeclarationOnly": false, // 编译时同时生成JS和类型文件
    "outDir": "./dist",
    "rootDir": "./src",
    "module": "ESNext",
    "target": "ES2015",
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "storybook", "dist"]
}

2. 在package.json中暴露类型入口 #

给package.json添加types字段，明确告诉外部项目类型定义的入口位置：

{
  "name": "my-ui-kit",
  "version": "x.x.x",
  "main": "./dist/index.js",
  "types": "./dist/types/index.d.ts", // 指向主类型文件路径
  "module": "./dist/index.esm.js", // 可选，ES模块入口
  "files": [
    "dist" // 确保发布时包含dist目录下所有文件（含类型文件）
  ]
}

如果用Rollup、Vite这类构建工具，要确保对应TypeScript插件（比如@rollup/plugin-typescript、vite-plugin-dts）能正确处理类型导出。

3. 验证导出代码的类型兼容性 #

你的导出代码：

export { default as Card } from "./Components/Card";

要确保该导出在生成的.d.ts文件中被正确识别。比如构建后dist/types/index.d.ts里必须有对应的导出声明。

4. 检查类型文件是否正确生成 #

构建完成后，去dist/types目录查看是否存在Card.d.ts，内容需类似：

import React from "react";
import { CardProps as AntCardProps } from "antd";
interface CardProps extends AntCardProps {
    title: string;
    extra: string;
}
declare const Card: React.FC<CardProps>;
export { Card as default, CardProps };

如果类型文件缺失或内容错误，需调整构建配置。

5. 清除缓存并重新安装包 #

在使用该UI包的项目中，执行以下命令：

npm uninstall my-ui-kit
rm -rf node_modules/.cache # 清除项目TypeScript缓存
npm install my-ui-kit

之后重启VS Code，让Intellisense重新加载类型定义。

额外提醒 #

• 尽量避免混用export default和别名导出，保持导出方式一致，减少类型解析问题。
• 将antd放到UI包的peerDependencies中，避免外部项目安装多版本导致类型冲突。
• 用Vite构建的话，可安装vite-plugin-dts插件，自动生成并合并类型文件，简化配置。

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