TypeScript带声明资产文件的路径解析与校验方案问询

问题现状 #

• 使用相对路径导入Spinner.svg时，会显示多个定义，优先跳转至声明文件而非实际资产文件，且无路径拼写或层级校验
• 使用tsconfig.json中paths配置的路径别名导入时，无法解析实际文件，仅能关联到.svg声明文件
• 无效导入不会报错，仅在运行时暴露问题

React项目中SVG资产示例 #

文件目录结构 #

• src
• src/assets.d.ts
• src/assets
• src/assets/Spinner.svg
• src/component/Component.tsx

要让TypeScript直接导入svg|png|jpg或其他未支持的资产文件，需编写自定义声明文件。

React + react-native-svg示例：

declare module '*.svg' {
  const content: React.FC<React.SVGAttributes<SVGElement>>
  export default content
}

配置了assets路径别名的tsconfig.json文件：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["ES2023"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "strictNullChecks": true,
    "resolveJsonModule": true,
    "target": "esnext",
    "baseUrl": "./",
    "paths": {
      "assets/*": ["src/assets/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

Component.tsx中的TypeScript导入示例：

// 打开定义窗口时会显示相对路径导入和声明文件
import '../assets/Spinner.svg'

// 仅关联到assets.d.ts文件
import 'assets/Spinner.svg'

// 无报错的无效导入（仅运行时出错）
import '../assets/Spinner1.svg'
import '../assets/123/Spinner.svg'

期望解决方案 #

• 路径校验生效，且IDE可跳转至实际资产文件
• VSCode及其他IDE可校验路径有效性
• 可在CI环境中校验路径是否存在

解决方案不局限于tsconfig.json或声明文件，但优先考虑此类方案。

备选方案 #

1. 使用作用域路径，仅从该作用域解析.svg文件 #

• 可避免路径层级导入问题
• 仍可能因文件名拼写错误导致失败

示例声明：

declare module 'assets/*.svg' {
  const content: React.FC<React.SVGAttributes<SVGElement>>
  export default content
}

2. 创建/添加IDE路径解析插件 #

• 例如eslint-plugin-validate-declared-imports

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