javascript - Como adicionar aliases de caminho para imagens no TypeScript?

Eu configurei paths no tsconfig.json. Tudo funciona bem, exceto a importação de arquivos de assets como svg e png.

Aqui está o meu paths no tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./src/components/*"],
      "@components": ["./src/components"],
      "@app/*": ["./src/app/*"],
      "static": ["static/*"]
    },
    ...
}

Aqui está como eu importo:

import imageAdd from "static/images/image-add.png";
import circleIcon from "static/icons/circle-close.svg"

Resposta #1

Finalmente, resolvido. Preciso adicionar algum arquivo d.ts. Ex.: images.d.ts com o conteúdo:

declare module "*.png";
declare module "*.jpg";

Depois, vá para o arquivo tsconfig.json e adicione este arquivo em include:

  "include": ["images.d.ts", <other includes>]

Provavelmente, você precisará instalar file-loader. Eu uso Gatsby, então não precisei configurar nada

Resposta #2

Substitua "static": ["static/*"] por "static/*": ["static/*"]