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

【问题标题】：Typescript doesn't recognise declared modules (*.svg) from my declaration fileTypescript 无法从我的声明文件中识别声明的模块 (*.svg)
【发布时间】：2022-01-02 09:33:08
【问题描述】：

除了其他声明之外，我还在我的 ./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 时。

【问题讨论】：

标签： typescript tsconfig

【解决方案1】：

我是这样用的：

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';

【讨论】：

感谢您的回复。似乎当/// <reference types="@emotion/react/types/css-prop" /> 存在时，这些类型不起作用。当我拆分声明时，它开始正常工作。
非常有用的信息，谢谢！你甚至不需要'png'的部分，也不需要'svg'的'title'。我开始明白了。

【解决方案2】：

我在项目编译根目录的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;
}

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

【讨论】：

感谢您的回复。似乎当/// <reference types="@emotion/react/types/css-prop" /> 存在时，这些类型不起作用。当我拆分声明时，它开始正常工作。