How to fix error when declaring graphics in Typescript?

Question

typescript

Declaring graphics in TS is certainly a pain! I did everything as in the documentation, but does not want to pick up the graphics

import sprite from '@/styles/sprite.svg';
Cannot find module '@/styles/sprite.svg' or its corresponding type declarations

esModuleInterop- switched on.
index.d.ts - created in the root src. Included in tsconfig.json

"includes" :[
    "./src/*.d.ts"
  ],

index.d.ts

///что первый, что второй вариант не помогает
declare module "*.svg";

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

reference pathadded - it does not work, and they write on the Internet that you can do without it, which I would very much like.
Any ideas what you missed? If there is not enough data, I will add it to the comments to the question.
UPD: Webpack is set to absolute paths. All necessary loaders (file-loader, url-loader) are available. In style files, graphics are picked up without problems. Only in .ts files does not see.

Answer 1

To declare custom declarations in the root of the project, it is customary to create a directory typesin which, for each package, a subdirectory containing the file is created index.d.ts. The subdirectory name is given based on the package name. In your case, it will be like this. ./types/svg/index.d.ts
To declare an extension, it is enough to declare a bodyless declaration - It
declare module "*.svg";
remains only to specify the path to the types directory in tsconfig.jsonthe array "typeRoots": ["./types"]
. For the compiler, this is enough. As for the field include, it contains an array of paths for the files involved in the compilation and in most cases is declared along with the field exclude. Together, they help optimize the compilation process.