Ich habe eine JSON
Datei, die wie folgt aussieht:
{
"primaryBright": "#2DC6FB",
"primaryMain": "#05B4F0",
"primaryDarker": "#04A1D7",
"primaryDarkest": "#048FBE",
"secondaryBright": "#4CD2C0",
"secondaryMain": "#00BFA5",
"secondaryDarker": "#009884",
"secondaryDarkest": "#007F6E",
"tertiaryMain": "#FA555A",
"tertiaryDarker": "#F93C42",
"tertiaryDarkest": "#F9232A",
"darkGrey": "#333333",
"lightGrey": "#777777"
}
Ich versuche es in eine .tsx
Datei zu importieren . Dazu habe ich dies der Typdefinition hinzugefügt:
declare module "*.json" {
const value: any;
export default value;
}
Und ich importiere es so.
import colors = require('../colors.json')
Und in der Datei verwende ich die Farbe primaryMain
als colors.primaryMain
. Ich erhalte jedoch eine Fehlermeldung:
Die Eigenschaft 'primaryMain' ist für den Typ 'typeof "* .json" nicht vorhanden.
json
angular
typescript
angular8
Sooraj
quelle
quelle
Antworten:
Das Importformular und die Moduldeklaration müssen über die Form des Moduls und dessen Export übereinstimmen.
Beim Schreiben (eine suboptimale Vorgehensweise zum Importieren von JSON seit TypeScript 2.9 beim Targeting kompatibler Modulformate siehe Hinweis )
Sie geben an, dass alle Module, deren Bezeichner mit endet
.json
, einen einzigen Exportnamen haben .default
Es gibt verschiedene Möglichkeiten, wie Sie ein solches Modul korrekt verwenden können, einschließlich
und
und
und
Die erste Form ist die beste und der syntaktische Zucker, den sie nutzt, ist genau der Grund, warum JavaScript
default
exportiert.Ich habe jedoch die anderen Formulare erwähnt, um Ihnen einen Hinweis darauf zu geben, was falsch läuft. Achten Sie besonders auf den letzten.
require
gibt Ihnen ein Objekt, das das Modul selbst darstellt und nicht seine exportierten Bindungen.Warum also der Fehler? Weil du geschrieben hast
Und doch gibt es keinen
primaryMain
von Ihnen deklarierten Export"*.json"
.All dies setzt voraus, dass Ihr Modullader den JSON als
default
Export bereitstellt, wie in Ihrer ursprünglichen Deklaration vorgeschlagen.Hinweis: Seit TypeScript 2.9 können Sie das
--resolveJsonModule
Compiler-Flag verwenden , damit TypeScript importierte.json
Dateien analysiert und korrekte Informationen zu ihrer Form bereitstellt, sodass keine Platzhaltermoduldeklaration erforderlich ist und das Vorhandensein der Datei überprüft wird. Dies wird für bestimmte Zielmodulformate nicht unterstützt.quelle
await import('remotepath');
Mit TypeScript 2.9. + Können Sie einfach JSON-Dateien mit Typensicherheit und Intelligenz wie folgt importieren:
Stellen Sie sicher, dass Sie diese Einstellungen im
compilerOptions
Abschnitt Ihrertsconfig.json
( Dokumentation ) hinzufügen :Randnotizen:
import * as colorsJson from '../colors.json'
quelle
esModuleInterop
, aber dann müssen Sie es tunimport * as foo from './foo.json';
- das hatesModuleInterop
mir andere Probleme bereitet, als ich versucht habe, es zu aktivieren."moduleResolution": "node"
in Ihr Modul aufnehmentsconfig.json
. Es hat auch den Nachteil, dass sich die*.json
Dateien, die Sie importieren möchten, innerhalb befinden müssen"rootDir"
. Quelle: blogs.msdn.microsoft.com/typescript/2018/05/31/…import * as foo from './foo.json'
das falsche Importformular. Es sollte sein,import foo = require('./foo.json');
wenn nichtesModuleInterop
"resolveJsonModule": true
und alles ist gutEs ist einfach, Typoskript Version 2.9+ zu verwenden. So können Sie JSON-Dateien einfach als importieren @kentor beschrieben importieren .
Wenn Sie jedoch ältere Versionen verwenden müssen:
Sie können auf mehr TypeScript-Weise auf JSON-Dateien zugreifen.
typings.d.ts
Stellen Sie zunächst sicher, dass Ihr neuer Standort mit dem identisch istinclude
Eigenschaft in Ihrertsconfig.json
Datei übereinstimmt.Wenn Ihre
tsconfig.json
Datei keine include-Eigenschaft enthält. Dann sollte Ihre Ordnerstruktur so aussehen:Aber wenn Sie eine
include
Immobilie in Ihremtsconfig.json
:Dann
typings.d.ts
sollten Sie sich imsrc
Verzeichnis befinden, wie ininclude
Eigenschaft beschriebenWie in vielen Antworten können Sie eine globale Deklaration für alle Ihre JSON-Dateien definieren.
aber ich bevorzuge eine typisiertere Version davon. Angenommen, Sie haben eine solche Konfigurationsdatei
config.json
:Dann können wir einen bestimmten Typ dafür deklarieren:
Es ist einfach, in Ihre Typoskriptdateien zu importieren:
In der Kompilierungsphase sollten Sie JSON-Dateien jedoch manuell in Ihren dist-Ordner kopieren. Ich füge meiner
package.json
Konfiguration einfach eine Skripteigenschaft hinzu:quelle
In Ihrer TS-Definitionsdatei, z. B. typings.d.ts`, können Sie folgende Zeile hinzufügen:
Fügen Sie dies dann in Ihre Typoskriptdatei (.ts) ein: -
quelle
any
sagt zwei Dinge. 1) dass Sie einfach per Definition falsch deklariert oder importiert haben. Sie soll nie unter keinen Umständen braucht eine Art Behauptung auf einem Import eines Moduls platzieren Sie haben selbst erklärt. 2) Selbst wenn Sie einen wahnsinnigen Lader haben, der dies zur Laufzeit irgendwie schafft, Gott sei Dank, wäre es immer noch eine wahnsinnig verwirrende und spröde Art, auf ein Modul der gegebenen Form zuzugreifen.* as x from
undx from
sind in Bezug auf die Laufzeit noch unpassender als im OP. Im Ernst, tu das nicht.Ein anderer Weg zu gehen
Hier können Sie immer noch den gewünschten JSON-Typ definieren und müssen keinen Platzhalter verwenden.
Beispiel: Benutzerdefinierter Typ json.
quelle
In Node.js-Anwendungen wird häufig eine .json-Datei benötigt. Mit TypeScript 2.9 ermöglicht --resolveJsonModule das Importieren, Extrahieren von Typen aus und das Generieren von .json-Dateien.
Beispiel #
quelle