关于react.js:解决ts开发时引入图片报错找不到xxx或其相应的类型声明-的问题

在应用 ts 开发时, 引入图片报错

import img from '../../assets/images/foo.png';

找不到模块“../../assets/images/foo.png”或其相应的类型申明。

因为 typescript 无奈辨认非代码资源。咱们须要被动的去申明这个 module

办法一：起源：参考链接
新建一个 ts 申明文件：images.d.ts

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

我的项目编译过程中会主动去读取.d.ts 这种类型的文件，所以不须要咱们手动加载。搁置在 tsconfig.json 中 include 属性所配置的文件夹下即可。

办法二：
如果你的我的项目在创立时应用：

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

那你的 src 目录下会有一个 react-app-env.d.ts 文件。内容如下：

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

该文件应用三斜线指令引入了 react-scripts 的类型申明文件，在指标文件 react-app.d.ts 中申明了各类图片等资源的类型。
文件内容：

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.avif' {
  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

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 '*.module.css' {const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {const classes: { readonly [key: string]: string };
  export default classes;
}

只有 tsconfig.json 中 include 蕴含了 src 目录，就能够失常引入。