导入自定义npm包时如何启用Intellisense智能提示？

针对你的npm包功能正常但无智能提示的问题，可从以下几个方向排查修复：

1. 修正类型文件的导出方式 #

你当前的index.d.ts使用全局声明（declare function），但npm包作为模块，类型需要通过export暴露给消费项目。修改声明为导出形式：

// index.d.ts
export declare function PictureImage(props: PictureImageProps): JSX.Element;
// 若组件是默认导出，对应改为：
// export default declare function PictureImage(props: PictureImageProps): JSX.Element;

同时确保PictureImageProps也已正确导出，否则消费项目无法识别该类型。

2. 让TypeScript自动生成类型文件，避免手动复制 #

你的build脚本手动复制index.d.ts和index.js到build目录，容易导致源码与类型文件不一致。建议：

• 在src目录下创建index.ts作为包的入口，统一导出组件和类型：

  // src/index.ts
  export { default as PictureImage } from './path/to/PictureImage';
  export type { PictureImageProps } from './path/to/PictureImage.types';
  

• 修改tsconfig.json的rootDir为./src（确保编译范围准确），移除手动复制的脚本，让tsc自动生成build/index.js和build/index.d.ts：

  {
    "compilerOptions": {
      "rootDir": "./src",
      // 其他配置不变
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "build"]
  }
  

• 更新build脚本为：

  "scripts": {
    "build": "rm -rf build && tsc"
  }
  

3. 验证package.json的类型指向 #

确认package.json的types字段正确指向生成的类型文件：

"types": "build/index.d.ts"

本地安装包后，检查node_modules/next-picture-image/build/index.d.ts是否存在且内容正确，确保导出的组件和类型都在其中。

4. 检查消费项目的TypeScript配置 #

消费项目的tsconfig.json需满足：

• moduleResolution设为Node或NodeNext
• skipLibCheck设为false（或确保不对你的包跳过类型检查）
• lib包含dom和ES6+版本（如["dom", "es2015"]）

5. 确保JS导出与类型声明一致 #

如果index.js中组件是默认导出，类型文件也要对应默认导出；若是命名导出，类型也要保持一致。比如：

// index.js（默认导出）
export default PictureImage;

对应类型：

// index.d.ts
export default declare function PictureImage(props: PictureImageProps): JSX.Element;

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