In typescript(*.tsx)
Dateien kann ich keine SVG-Datei mit dieser Anweisung importieren:
import logo from './logo.svg';
Transpiler sagt: [ts] cannot find module './logo.svg'.
Meine SVG-Datei ist nur <svg>...</svg>
.
Aber in .js
Datei kann ich es ohne Probleme mit genau der gleichen Importanweisung importieren. Ich nehme an, es hat etwas mit dem Typ der SVG-Datei zu tun, die irgendwie für den Transpiler eingestellt werden muss.
Könnten Sie bitte mitteilen, wie dies in ts-Dateien funktioniert?
typescript
svg
Wütender Junge
quelle
quelle
import
Aussage zu verstehen . Vielleicht erlaubt Webpack dies in Ihrem JavaScript, aber es macht nicht die gleiche Magie in TypeScript-Dateien. (Ich glaube nicht, dass TypeScript selbst weiß, was hier zu tun ist.)const logo = require("./logo.svg");
den Fehler wahrscheinlich tun oder einfach ignorieren. (Ich glaube, TS sollte immer noch den richtigen Code ausgeben.)const logo = require("./logo.svg") as string;
Antworten:
Wenn Sie Webpack verwenden, können Sie dies tun, indem Sie eine benutzerdefinierte Typdatei erstellen.
Erstellen Sie eine Datei mit dem Namen custom.d.ts mit folgendem Inhalt:
Fügen Sie die
custom.d.ts
zutsconfig.json
wie untenQuelle: https://webpack.js.org/guides/typescript/#importing-other-assets
quelle
include
Abschnitt in tsconfig.json hinzufügen ."files": [ "custom.d.ts" ]
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
custom.d.ts
Datei global funktioniert, sodass sich die SVG in einem anderen Verzeichnis als diecustom.d.ts
Datei befinden kann? Ich erhalte die Fehlermeldung "Modul kann nicht gefunden werden", es sei denn, es befindet sich im selben Verzeichnis.Vielen Dank an smarx für den Hinweis auf die Verwendung
require()
. In meinem Fall sollte es also sein:Das funktioniert gut in * .tsx-Dateien
quelle
logo
könnte besser benannt seinlogoPath
, denn so wird es.logo
in der Frage aufgerufen , sodass es eine bessere Antwort auf diese spezielle Frage ist.Fügen Sie eine
custom.d.ts
Datei (ich habe sie im Stammpfad meines src-Verzeichnisses erstellt) mit dem richtigen Typ hinzu (dank RedMatt ):Installieren Sie svg-react-loader oder einen anderen , dann:
Verwenden Sie es dann einfach als JSX-Tag:
quelle
Die Lösung, die ich gefunden habe: Im ReactJS-Projekt entfernen Sie in der Datei react-app-env.d.ts einfach das Leerzeichen im Kommentar, z.
Vor
Nach dem
ich hoffe Dir zu helfen
quelle
Ich hatte das gleiche Problem beim Ausprobieren eines REACT + Typoskript-Tutorials.
Was für mich funktioniert hat, war die folgende Importanweisung.
Hier sind meine Abhängigkeiten in package.json.
Hoffe es hilft jemandem.
quelle
Um n On-Code-Assets mit TypeScript zu verwenden , müssen Sie den Typ für diese Importe verschieben . Dies erfordert eine Datei custom.d.ts , die benutzerdefinierte Definitionen für TypeScript in unserem Projekt angibt .
Lassen Sie uns eine Deklaration für .svg-Dateien einrichten:
custom.d.ts
Hier deklarieren wir ein neues Modul für SVGs, indem wir einen Import angeben, der mit .svg endet, und den Inhalt des Moduls als einen beliebigen definieren.
quelle
Es gibt eine alternative Möglichkeit, die wir implementiert haben: Erstellen Sie Ihre SVG-Komponenten. Ich habe dies getan, weil es mich nervte, dass ich
require
neben meinenimport
s commonJS- Anweisungen verwendete .quelle
Wenn Sie den Puglin Slint verwenden, kann es sein, dass er deaktiviert hat, weil er dachte, es sei ein Kommentar, aber um das SVG nicht zu lesen, benötigen Sie dieses Skriptmodul. Deaktivieren Sie einfach die Zeile und seien Sie glücklich
quelle