基于TypeScript构建导出原生SVG图标的NPM包遇TypeScript类型错误求助

看起来你的核心问题主要集中在TypeScript无法正确处理SVG文件的编译与拷贝，以及导入导出的类型声明不匹配这两个点上。结合你的配置，我来帮你一步步排查并解决这些问题：

1. 先解决SVG文件未被拷贝到dist目录的关键问题 #

TypeScript编译器（tsc）只会处理.ts/.d.ts/.js这类代码文件，不会自动把SVG资源复制到输出目录。这会导致两个问题：一是用户安装你的包后，导入图标时找不到对应的SVG文件；二是TS编译时会因为找不到实际文件抛出错误。

解决方案：

• 先安装copyfiles工具来自动拷贝SVG文件：

  npm install copyfiles --save-dev
  

• 修改package.json里的build脚本，在TS编译完成后添加拷贝步骤：

  "scripts": {
    "build": "tsc && copyfiles -u 1 src/svg/*.svg dist/svg"
  }
  

  这里-u 1的作用是忽略源路径的第一层目录（简单说就是把src/svg/下的文件直接放到dist/svg/，而不是嵌套成dist/src/svg/）。

2. 修正类型声明与导出的匹配问题 #

你的global.d.ts声明了SVG模块的默认导出为字符串，但在src/index.ts里导入后用命名导出对外暴露，TS可能会因为这种导出方式的间接性抛出"导出不存在"的错误。

调整步骤：

• 先确认global.d.ts已经被tsconfig.json的include字段包含（你的配置里已经做到了，没问题）。
• 可以修改global.d.ts，同时支持默认导出和命名导出，增强兼容性：

  declare module '*.svg' {
    const content: string;
    export default content;
    export = content;
  }
  

• 或者在src/index.ts里换一种更明确的导入导出方式，让TS能清晰推断类型：

  // 先默认导入，再重新命名为常量导出
  import defaultTestIcon from "./svg/test.svg";
  import defaultArrowThinLeft from "./svg/arrow-thin-left.svg";
  
  export const TestIcon = defaultTestIcon;
  export const ArrowThinLeft = defaultArrowThinLeft;
  

3. 验证类型声明文件的正确性 #

运行npm run build后，检查dist/index.d.ts是否生成了正确的类型声明。正常情况下，它应该类似这样：

export declare const TestIcon: string;
export declare const ArrowThinLeft: string;

如果没有生成，再确认tsconfig.json里的declaration: true是否开启（你的配置已经开启了），同时确保src/index.ts没有语法错误。

4. 额外的配置优化建议 #

• 你的tsconfig.json中module设为esnext，而package.json的module字段指向dist/index.js。如果你的包需要兼容CommonJS环境，可以把tsconfig.json的module改为ES6，或者给package.json添加"type": "module"（明确使用ES模块规范）。
• 可以在package.json里添加"files"字段，明确指定包包含的文件，避免发布时遗漏资源：

  "files": [
    "dist"
  ]
  

最后测试一下：运行npm run build后，检查dist目录是否包含index.js、index.d.ts以及svg文件夹下的所有SVG文件。你还可以用npm link在本地测试包的导入，确认没有TS错误和运行时问题。

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