타이프스크립트 이미지 Import

타이프스크립트 이미지 Import

여기에서 해결책을 찾았습니다.Webpack & Typescript 이미지 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'.

어떻게든 수입을 해야 할 것 같은데, 어떻게 해야 할지 모르겠어요.리액트에서 하고 있어요난 그걸 봤어.srcAtribute는 다음과 같이 정의됩니다.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"]
}

이 오류를 제거하는 방법 중 하나는 다음과 같이 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;
}

위해서react-native

만들다global.d.ts프로젝트 파일root폴더에 다음 행을 추가합니다.

declare module '*.png' {
  const value: import('react-native').ImageSourcePropType;
  export default value;
}

index.d.ts를 만들고 declare module "*.jpg"를 추가했지만 custom.d.ts(또는 다른 이름)로 변경했을 때 정상적으로 동작했습니다.

언급URL : https://stackoverflow.com/questions/51100401/typescript-image-import