React Native中使用svg模块遇TypeScript类型声明找不到错误求助

你遇到的问题是TypeScript缺少SVG文件的类型声明——虽然Metro已经能正确解析SVG并正常显示，但TS不知道如何处理.svg模块，因此抛出Cannot find module错误。以下是具体解决步骤：

1. 创建SVG类型声明文件 #

在项目根目录（或src目录）下创建一个名为svg.d.ts的文件，写入以下内容：

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

这段代码告诉TypeScript：所有.svg文件默认导出一个符合react-native-svg的SvgProps规范的React函数组件。

2. 让TypeScript识别这个声明文件 #

修改你的tsconfig.json，确保它能包含这个类型声明文件：

• 如果svg.d.ts在根目录，在include数组中添加该文件路径：

{
  // ... 其他原有配置
  "include": [
    "App.tsx",
    "svg.d.ts",
    // 其他需要包含的文件/目录
  ]
}

• 如果把类型文件放在types子目录下，可改为：

"include": [
  "src/**/*",
  "types/**/*.d.ts"
]

3. 额外检查（可选） #

虽然你提到SVG能正常显示，还是可以确认下metro.config.js的配置是否正确，确保react-native-svg-transformer生效：

const { getDefaultConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

完成以上步骤后，重启TypeScript语言服务（或IDE），TS2307错误应该就会消失。

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