Typescript 无法识别我的声明文件中声明的模块 (*.svg)

Question

连同其他声明，我在 ./src/types.d.ts 文件中声明了以下模块：

/// <reference types="@emotion/react/types/css-prop" />
import '@emotion/react';
import { PureComponent, SVGProps } from 'react';

declare module '*.svg' {
  export class ReactComponent extends PureComponent<SVGProps<SVGSVGElement>> {}
}
declare module '*.ttf';
declare module '*.eot';
declare module '*.woff';
declare module '*.woff2';

当我运行 tsc --noEmit 错误如...

src/fonts/fonts.ts:39:31 - error TS2307: Cannot find module './pt-sans-v12-latin-ext_latin-regular.woff' or its corresponding type declarations.

39 import PTSansregularWOFF from './pt-sans-v12-latin-ext_latin-regular.woff';
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/fonts/fonts.ts:40:32 - error TS2307: Cannot find module './pt-sans-v12-latin-ext_latin-regular.woff2' or its corresponding type declarations.

40 import PTSansregularWOFF2 from './pt-sans-v12-latin-ext_latin-regular.woff2';
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/layouts/default/NavigationBar.tsx:4:41 - error TS2307: Cannot find module '../../images/brand.svg' or its corresponding type declarations.

4 import { ReactComponent as Brand } from '../../images/brand.svg';
                                          ~~~~~~~~~~~~~~~~~~~~~~~~

...都吐出来了

我的 tsconfig.json 看起来像这样：

{
  "include": ["./src/**/*", "./.gatsby/**/*", "./*.ts", "./plugins/**/*"],
  "files": ["./src/types.d.ts"],
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["dom", "ES2017", "ES2019"],
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmit": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}

我的文件树如下所示：

如何让 Typescript 找到我对应的类型声明？

有趣的是，我的 types.d.ts 的其他部分也有影响，比如当我定义 @emotion/react 的接口 Theme 时。

Answer 1

我将以下内容放在项目编译根目录的custom.d.ts文件中，以启用加载svg和png文件-

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

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

  const src: string;
  export default src;

}
declare module "*.png" {
  const value: any;
  export default value;
}

但是，我不够专业，无法理解它到底在做什么。

Answer 2

我是这样用的：

declare module '*.jpg';
declare module '*.png';
declare module '*.woff2';
declare module '*.woff';
declare module '*.ttf';

declare module '*.svg' {
  import React = require('react');

  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

然后像这样导入：

import { ReactComponent as Logo } from './svg/logo.svg';
import SomeImage from './images/background.png';

Typescript 无法识别我的声明文件中声明的模块 (*.svg)

Typescript doesn't recognise declared modules (*.svg) from my declaration file

typescript

tsconfig