TypeScript：Cannot find module 'xxx.png' or its corresponding type declarations

jetsung

TypeScript 中出现 TS2307: Cannot find module '@/assets/logo.png' or its corresponding type declarations. 的解决办法

使用方法

import { Card } from 'antd'

import logo from '@/assets/logo.png'
import './style.scss'

function Login() {
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
      </Card>
    </div>
  )
}

export default Login

报错信息

Compiled with problems:X

ERROR in src/pages/Login/index.tsx:3:18

TS2307: Cannot find module '@/assets/logo.png' or its corresponding type declarations.
    1 | import { Card } from 'antd'
    2 |
  > 3 | import logo from '@/assets/logo.png'
      |                  ^^^^^^^^^^^^^^^^^^^
    4 | import './style.scss'
    5 |
    6 | function Login() {

解决方法

创建文件 src/@type/index.d.ts

内容如下

declare module '*.svg' {
  import React = require('react')
  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>
  const src: string
  export default src
}

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

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

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

在配置文件 tsconfig.json 的 compilerOptions 选项中添加以下内容

{
  "compilerOptions": {
...
    "typeRoots": [
      "./src/@types",
      "./node_modules/@types"
    ],
...
}

参考文章
1. https://duncanleung.com/typescript-module-declearation-svg-img-assets/
2. https://www.typescriptlang.org/tsconfig#typeRoots