如何使发布到npm的TypeScript类型库支持IDE自动导入？

我创建了一个仅导出IBasic接口的TypeScript类型库，已发布至npm并在另一项目中完成安装。当我将常量声明为IBasic类型时，无法通过Ctrl+.触发自动导入，但手动写入import { IBasic } from "node_modules/<libraryname>/src"可正常使用。请问如何让该库的接口在项目中支持自动导入？

库的package.json #

{
  "name": "enzotypes",
  "version": "1.0.1",
  "description": "types library test",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c --bundleConfigAsCjs"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.6",
    "@types/react": "^18.2.51",
    "react": "^18.2.0",
    "rollup": "^4.9.6",
    "rollup-plugin-dts": "^6.1.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2",
    "tslib": "^2.6.2",
    "typescript": "^5.3.3"
  },
  "peerDependencies": {
    "react": "^18.2.0"
  }
}

项目的package.json #

{
    "name": "[...]",
    "version": "0.0.1",
    "description": "",
    "author": "",
    "private": true,
    "license": "UNLICENSED",
    "scripts": {
        "prebuild": "rimraf dist",
        "build": "nest build",
        "gen:model": "ts-node src/commands/fromdbmodel.ts",
        "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
        "start": "nest start",
        "start:dev": "nest start --watch",
        "start:debug": "nest start --debug --watch",
        "start:prod": "node dist/src/main",
        "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
        "test": "jest --config jest.json",
        "test:watch": "jest --config jest.json --watch",
        "test:ci": "jest --config jest.json --ci --coverage --runInBand --testResultsProcessor='jest-junit'",
        "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
        "test:cov": "jest --config jest.json --coverage"
    },
    "dependencies": {
        [...]
        "enzotypes": "^1.0.1",
        [...]
    },
    "devDependencies": {
        [...]
    }
}

解决方案 #

1. 修正导入路径为标准包名 #

手动导入用的node_modules/<libraryname>/src是非标准路径，IDE无法识别为包的合法导出入口。正确的导入方式应为：

import { IBasic } from "enzotypes";

确保库的构建产物和类型定义都指向这个包名的解析路径。

2. 验证类型文件的正确性与完整性 #

• 检查库构建后的dist/index.d.ts是否存在，且内容正确导出IBasic：

  export interface IBasic {
    // 你的接口定义内容
  }
  

• 确认package.json的types字段dist/index.d.ts指向的路径正确，且该文件已被包含在npm发布包中。

3. 检查npm发布内容 #

• 确保库的.npmignore（或.gitignore）没有排除dist目录，否则发布后的包中缺少构建产物，IDE无法找到类型定义。
• 可以执行npm pack命令生成本地包压缩文件，解压后检查是否包含完整的dist目录及其中的文件。

4. 确认Rollup构建配置正确处理类型 #

检查Rollup配置文件（rollup.config.js），确保rollup-plugin-dts正确生成合并后的类型文件，示例配置如下：

import dts from "rollup-plugin-dts";
import typescript from "@rollup/plugin-typescript";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import terser from "rollup-plugin-terser";

export default [
  // JS模块构建
  {
    input: "src/index.ts",
    output: [
      {
        file: "dist/cjs/index.js",
        format: "cjs",
        sourcemap: true
      },
      {
        file: "dist/esm/index.js",
        format: "esm",
        sourcemap: true
      }
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      terser()
    ]
  },
  // 类型文件构建
  {
    input: "src/index.ts",
    output: [{ file: "dist/index.d.ts", format: "es" }],
    plugins: [dts()]
  }
];

同时确保库的src/index.ts正确导出IBasic接口。

5. 清理IDE缓存并重启 #

• 对于VSCode，按Ctrl+Shift+P，输入TypeScript: Restart TS Server重启类型服务。
• 重启IDE，清除可能存在的缓存问题。

6. 检查项目TypeScript配置 #

确保项目的tsconfig.json使用node模块解析策略，避免自定义路径影响包的解析：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      // 避免配置与"enzotypes"冲突的路径规则
    }
  }
}

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