Angular自定义Webpack项目中SVG懒加载的TypeScript类型定义问题

调整SVG模块的类型声明 #

你当前的类型声明只适配了静态默认导入场景，动态import()返回的是包含所有导出的模块对象，而非直接字符串。修改*.svg的类型声明，同时覆盖两种导入方式：

declare module '*.svg' {
  const content: string;
  export default content;
  // 为动态导入明确模块类型
  export = content;
}

或者更严谨的写法，明确模块结构：

declare module '*.svg' {
  const svgContent: string;
  export default svgContent;

  // 定义动态import返回的模块对象类型
  interface SvgModule {
    default: string;
  }
  export as namespace SvgModule;
  export = SvgModule;
}

正确处理动态导入的类型 #

动态导入时，需要从返回的模块对象中获取default属性，而非直接断言为字符串：

import('src/icons/arrow-up.svg').then((module) => {
  const icon = module.default; // 自动推断为string类型
  // 这里可以正常使用icon字符串
})

封装懒加载函数（可选优化） #

如果频繁使用SVG懒加载，可封装一个类型安全的工具函数：

async function loadSvg(path: string): Promise<string> {
  const module = await import(/* webpackChunkName: "svg-[request]" */ path);
  return module.default;
}

// 使用示例
loadSvg('src/icons/arrow-up.svg').then(icon => {
  // icon自动被推断为string类型
})

原理 #

静态import icon from '*.svg'会直接取默认导出值，而动态import()返回的是完整的模块对象。原始类型声明未明确模块对象的结构，导致TypeScript无法正确推断动态导入的类型。添加模块结构定义后，TypeScript就能识别模块对象包含default属性且类型为字符串。

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