解决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 文件。内容如下：

/// 

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

/// 
/// 
/// 

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 & { 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目录，就可以正常引入。