web-dev-qa-db-ja.com

タイプスクリプト画像のインポート

私はここで解決策を見つけました： Webpack＆TypeScript image import

しかし、私はこれについてエラーが発生しています：

[ts]
Types of property 'src' are incompatible.
  Type 'typeof import("*.png")' is not assignable to type 'string | undefined'.
    Type 'typeof import("*.png")' is not assignable to type 'string'.

私は何とかインポートをキャストする必要があると思いますが、どのように理解することはできません。 Reactでこれを行っています。 src属性がstring | undefined、これがエラーが発生している理由です。

コードは次のとおりです。

import * as Logo from 'assets/images/logo.png';

HTML：

<img src={Logo} alt="" />

上記のソリューションに基づく定義：

declare module "*.png" {
  const value: string;
  export default value;
}

Tsconfig：

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "lib": ["es5", "es6", "dom"],
    "module": "commonjs",
    "noImplicitAny": false,
    "outDir": "./dist/",
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "typeRoots": [
      "custom_typings"
    ]
  },
  "include": ["./src/**/*.tsx"],
  "exclude": ["dist", "build", "node_modules"]
}
reactjstypescriptmoduletsconfigreact-tsx
9
Mario Petrovic

このエラーを取り除く方法の1つは、d.tsファイルを次のように変更することです。

declare module "*.png"

削除する

{
  const value: string;
  export default value;
}

または代わりに次のことができます：

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

更新

型チェックの最適なソリューションは次のとおりです。

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