typescript - tsconfig yollarını çalıştıramıyorum (TS2307)

İşte benim tsconfig.json dosyam:

{
    "compilerOptions": {
        "strict": true,
        "importHelpers": false,
        "inlineSources": true,
        "noEmitOnError": true,
        "pretty": true,
        "module": "esnext",
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": false,
        "removeComments": false,
        "preserveConstEnums": false,
        "sourceMap": true,
        "lib": ["es2018","dom"],
        "skipLibCheck": false,
        "outDir": "dist",
        "target": "es2018",
        "declaration": false,
        "resolveJsonModule": false,
        "esModuleInterop": true,
        "jsx": "preserve",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "noEmit": true,
        "paths": {
            "@/*": ["./src/*"],
        },
    },
    "files": [
        "src/index.tsx"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}

Koşma :

node_modules/.bin/tsc --noEmit
src/components/App.tsx:13:27 - error TS2307: Cannot find module '@/icons/info-circle.svg'.

13 import InfoCircleSvg from '@/icons/info-circle.svg';
                             ~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/pages/HomePage.tsx:2:20 - error TS2307: Cannot find module '@/images/gambit.jpg'.

2 import imgSrc from '@/images/gambit.jpg';
                     ~~~~~~~~~~~~~~~~~~~~~


Found 2 errors.

Ama o dosyalar gerçekten var:

ll src/icons/info-circle.svg
-rw-r--r-- 1 mpen mpen 479 Mar 15 18:51 src/icons/info-circle.svg

paths için aklıma gelen tüm kombinasyonları * ile ve * olmadan denedim, ama hiçbirini çözemiyorum. baseUrl bir çok öğretici ve yazıda önerildiği gibi . olarak ayarlandı. Eksik olan ne?

tsc’yi takılan dosya uzantıları mı? Çünkü webpack bunlarla gayet iyi başa çıkabiliyor ve include seçeneğinin yakalaması gereken bir images.d.ts dosyam var:

import { ElementType } from "react";

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

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

declare module "*.jpeg" {
  const content: string;
  export default content;
}

declare module "*.gif" {
  const content: string;
  export default content;
}

declare module "*.svg" {
  const content: ElementType<React.SVGProps<SVGSVGElement> & { title?: string, desc?: string }>;
  export default content;
}

Cevap #1

Sorun yollarla değil, beyan dosyasıyla ilgilidir.

Bunu düzeltmek için, üst düzey ithalatı modül beyanına taşıyabilirsiniz:

declare module "*.svg" {
    import { ElementType, SVGProps } from 'react';
    const content: ElementType<SVGProps<SVGSVGElement> & { title?: string, desc?: string }>;
    export default content;
}

Ya da onu tamamen kaldır ve:

declare module "*.svg" {
    const content: React.ElementType<React.SVGProps<SVGSVGElement> & { title?: string, desc?: string }>;
    export default content;
}

Import bildirimi dosyayı modül yapar ve bu nedenle declare module "*.svg" bildirimi tsc tarafından bir modül bildirimi değil bir modül artırımı olarak kabul edilir.

İlgili makaleler