модуль typescript .d.ts для изображений не работает

#reactjs #typescript #types

#reactjs #typescript #типы

Вопрос:

Я немного новичок в Typescript, моя единственная слабость — tsconfig.json .

У меня проблема с импортом изображений (в Reactjs), которые не найдены:

 client/app/Reports/View.tsx:11:30 - error TS2307: Cannot find module '../../assets/images/placeholders/awards.png' or its corresponding type declarations.

11 import AwardPlaceholder from "../../assets/images/placeholders/awards.png";

Итак, я искал и нашел вывод об объявлении модулей для файлов изображений, чтобы TS мог правильно зарегистрировать их как модули, поэтому я сделал это:

 // @types/images.d.ts
declare module '*.svg' {
  const content: string;
  export default content;
}

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

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

но ошибка все еще сохраняется, вот моя tsconfig.json , я думаю, что это может потребовать некоторой работы, но это работает так, как я хочу, потому что у меня есть объявления пользовательских типов

 {
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es2017",
        "skipLibCheck": true,
        "noImplicitAny": true,
        "noEmit": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "jsx": "react",
        "paths": {
         "MyCustomTypesModule" : ["@types/MyCustomTypesModule/index.d.ts"],
            "*": [
                "node_modules/*"
            ]
        },
        "typeRoots" : ["@types"]
    },
    "include": [
        "server/**/*",
        "client/**/*"
    ]
}

благодаря моим исследованиям, поскольку файл images.d.ts объявления находится в моей @types папке, Typescript должен просто увидеть и подтвердить его.

Что-то не так с моим tsconfig.json ? Должен ли я где-то регистрировать его отдельно в конфигурации?

Чтобы запустить сервер typescript, я просто выполняю $ tsc

Ответ №1:

Я переместил свой images.d.ts путь из @types/images.d.ts за пределов моей @types папки в client/images.d.ts и каким-то образом это сработало, хотя мой typeRoots есть [@types] .

Ответ №2:

Ключевым моментом для меня было то, что .d.ts файлы должны быть во вложенных папках внутри @types .

Моя структура папок теперь выглядит так и работает отлично:

 my_project/
├─ @types/
│  ├─ global/
│  │  ├─ index.d.ts
│  ├─ assets/
│  │  ├─ index.d.ts
├─ app.tsx