在typescript(*.tsx)文件中,我不能用下面的语句导入svg文件:

import logo from './logo.svg';

Transpiler说:[ts]找不到模块'./logo.svg'。 我的svg文件就是<svg>…</svg>。

但在.js文件中,我能够导入它没有任何问题,完全相同的导入语句。我想这与svg文件的类型有关,它必须以某种方式为ts transpiler设置。

你能在ts文件中分享一下如何做到这一点吗?


当前回答

如果没有其他的答案工作,尝试重新启动你的IDE(即VS Code)。对我来说,这就解决了问题。

其他回答

我找到的解决方案:在ReactJS项目中,在文件react-app-env.d中。你可以删除评论中的空格,比如:

之前

// / <reference types="react-scripts" />

/// <reference types="react-scripts" />

我希望能帮到你

如果你正在使用Create-React-App启动器,请确保react-app-env.d。Ts包含如下行:

/// <reference types="react-scripts" />

希望!这会帮助到别人。

实际上,我尝试了所有的步骤,但有一件事我们必须理解,您必须将custom.d.ts文件创建到相应的SVG导入文件夹中。

Ts配置文件

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "Node",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@styles/*": ["src/styles/*"],
      "@static/*": ["src/static/*"]
    },
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src/**/*", "src/static/optional.d.ts"],
  "exclude": ["node_modules", "build"]
}

optional.d.ts

declare module '*.svg' {
    import * as React from 'react';

    export const ReactComponent: React.FunctionComponent<React.SVGProps<
        SVGSVGElement
    > & { title?: string }>;

    const src: string;
    export default src;
}

最后是常用的导出文件:

import Logo from './images/logo.svg';
import BellDot from './images/bell-dot.svg';
import Logout from './images/logout.svg';
import pageNotFound from './images/page-not-found.png';

export {
    Logo,
    BellDot,
    pageNotFound,
    Logout
}

更好的主意是:

感谢smarx指出使用require()。所以在我的例子中,它应该是:

const logo = require("./logo.svg") as string;

在*中工作得很好。tsx文件

找不到模块或对应的类型声明|无法在typescript中导入svg文件

在。/custom.d中。Ts文件,添加这个:

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

如果你有任何困惑,请观看这个视频。 https://www.youtube.com/watch?v=Skhgdp7R9Tk