Typescript 错误并说它找不到用于导入图像等资产的模块

Question

不知道如何解决这个问题。 TS 不喜欢导入图像。 虽然它在您实际运行站点时有效，但出于某种原因 TS 不知道它们是什么：

import React, { Component } from 'react';
import SlackIcon from './assets/social/slack-icon-thumb.png';
import TwitterIcon from './assets/social/twitter-icon-small.png';

tsconfig.json

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    "target": "es6",                     /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "es6",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": ["es6"],                      /* Specify library files to be included in the compilation. */
    "moduleResolution": "node",
    "allowJs": true,                     /* Allow javascript files to be compiled. */
     "checkJs": true,                     /* Report errors in .js files. */
    "jsx": "react",
    "noImplicitAny": true,
     "sourceMap": true,                   /* Generates corresponding '.map' file. */
    "outDir": "dist",                   /* Redirect output structure to the directory. */
    "rootDir": "./",                     /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     "removeComments": true,              /* Do not emit comments to output. */
    "strict": true,                      /* Enable all strict type-checking options. */
     "noUnusedLocals": true,                /* Report errors on unused locals. */
     "noUnusedParameters": true,            /* Report errors on unused parameters. */
//    "rootDirs": ["."],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    "typeRoots": [
      "node_modules/@types"
    ],                      /* List of folders to include type definitions from. */
        "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
//      "resolveJsonModule": true,
        "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true
    },
    "include": [
        "src"
    ],
    "exclude": [
        "/node_modules",
        "**/test"
  ]
}

Answer 1

您需要将其声明为.d.ts文件中的模块：

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

要不就

declare module '*.png';

您可以在src文件夹中创建images.d.ts并添加您需要的任何自定义声明。

这是两个很好的类似帖子：

在 TypeScript React 中导入图像 - “找不到模块”

Typescript 图像导入