vscode svg 声明文件已解析，而不是带有react-native 和 typescript 的 svg 文件路径

Question

问题

有没有办法让 Visual Studio Code (VScode) 解析 svg 文件及其路径位置而不是 declaration.d.ts 文件位置？

背景

这个问题出现在所有使用 typescript 和 svgs 的个人和工作相关的 React-Native 项目中。这个问题已经存在很多年了...

问题：

当给出声明时，Svgs 不会解析到它们的定义位置。相反，他们解析为类型声明

仅当使用 SVG 声明文件时才会发生这种情况，该文件用于解决 SVG 导入的打字稿错误。如果没有此声明，vscode 将正确解析为asset/svg/close.svg文件而不是 declaration.d.ts 文件，并且会引发导入文件的类型错误。

例子

import Close from '../../../assets/svg/close.svg'

单击“../../../assets/svg/close.svg”的“转到定义”将显示声明。

声明.d.ts

declare module '*.svg' {
  import React from 'react'
  import { SvgProps } from 'react-native-svg'
  const content: React.FC<SvgProps>
  export default content
}

tsconfig.json 文件。请注意，typeRoots src/types 是添加 svg 声明的declaration.d.ts 文件的位置。

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "typeRoots": ["./src/types", "node_modules/@types"],
    "baseUrl": ".",
    "composite": true,
    "declarationMap": true,
    "paths": {
      "assets/*": ["src/assets/*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

示例视觉导航右键菜单。该文件也可以通过 CMD + 单击来解析。

• 转到定义选项应始终解析文件路径。相反，它解析上面显示的声明文件。
• “转到类型定义”选项将指向 React.Element 文件。