Import von JSON in TypeScript: vollständige Anleitung mit Beispielen

Wie man JSON in TypeScript importiert, ohne verrückt zu werden

Wenn Sie jemals versucht haben, import data from './config.json' in TypeScript zu verwenden, kennen Sie dieses Gefühl: Der Compiler wird rot, schimpft und wirft einen Fehler Cannot find module aus. Kommt Ihnen das bekannt vor? Allerdings! Die Frage zum Import von JSON in TypeScript ist eine der beliebtesten auf Stack Overflow. Und das ist nicht verwunderlich: JSON wird überall verwendet – Konfigurationen, Lokalisierung, Mock-Daten, statische Listen. Aber TypeScript kann standardmäßig nicht mit JSON-Dateien umgehen.

In diesem Tutorial werden wir alle Möglichkeiten zum Import von JSON in TypeScript durchgehen – vom einfachen Aktivieren eines Flags in der tsconfig bis hin zur fortgeschrittenen Typisierung. Sie erfahren, wie Sie TypeScript mit JSON befreunden und diese rote Fehlermeldung nie wieder sehen werden. Los geht's!

Warum sieht TypeScript JSON nicht?

Bevor wir in den Code eintauchen, lassen Sie uns den Grund verstehen. TypeScript ist eine Erweiterung von JavaScript, die statische Typisierung hinzufügt. Standardmäßig erwartet der TypeScript-Compiler, dass alle importierten Module .ts- oder .js-Dateien sind. JSON ist kein Modul, sondern ein Datenformat. TypeScript weiß einfach nicht, wie es interpretiert werden soll.

Die Lösung liegt in zwei Bereichen:

\n
• Compiler-Konfiguration – JSON-Unterstützung über das Flag resolveJsonModule aktivieren.
\n
• Moduldeklaration – den Typ für JSON-Dateien manuell beschreiben, wenn das Flag nicht geeignet ist.
\n

Methode 1: resolveJsonModule aktivieren (der richtige Weg)

Der einfachste und empfohlene Weg ist, die Option resolveJsonModule in der tsconfig.json hinzuzufügen. Dieses Flag sagt TypeScript: "Hey Kumpel, lass uns JSON wie normale Module importieren".

// tsconfig.json\n{\n    "compilerOptions": {\n        "resolveJsonModule": true,\n        "esModuleInterop": true\n    }\n}

Danach können Sie problemlos schreiben:

// config.ts\nimport config from './config.json';\n\nconsole.log(config.apiUrl); // funktioniert!\nconsole.log(config.port);    // funktioniert!

Was passiert hier? TypeScript erstellt automatisch Typen für das importierte JSON. Wenn Ihr JSON ein Feld apiUrl: string und port: number enthält, leitet TypeScript deren Typen ab und überprüft die Verwendung. Ziemlich cool, oder?

Es gibt jedoch einen Haken: resolveJsonModule erfordert auch die Aktivierung von esModuleInterop oder allowSyntheticDefaultImports, damit der Standardimport korrekt funktioniert. Ohne dies erhalten Sie einen Fehler beim Importversuch.

Methode 2: Import mit benannten Exporten

Manchmal benötigen Sie nicht das gesamte JSON, sondern nur bestimmte Felder. TypeScript unterstützt auch dies:

import { apiUrl, port } from './config.json';\n\nconsole.log(apiUrl); // Zeichenkette\nconsole.log(port);   // Zahl

Dies ist dank des sogenannten "Tree-Shaking" in Bundlern (Webpack, Vite) möglich, aber auf TypeScript-Ebene ist es einfach eine Objektdestrukturierung. Beachten Sie jedoch: Wenn Sie resolveJsonModule verwenden, erstellt TypeScript automatisch Typen für alle Felder, sodass Sie sowohl das gesamte Objekt als auch Teile davon sicher importieren können.

Methode 3: require statt import (für alte Projekte)

Wenn Sie in einem Projekt arbeiten, in dem resolveJsonModule aus irgendeinem Grund nicht aktiviert werden kann (z.B. Konflikt mit anderen Einstellungen), können Sie das gute alte require verwenden:

const config = require('./config.json');\n\nconsole.log(config.apiUrl); // funktioniert, aber ohne Typen

Das Problem dieses Ansatzes ist offensichtlich: Sie verlieren die Typisierung. TypeScript weiß nicht, was in config steckt, und behandelt es als Typ any. Dies öffnet Fehlern Tür und Tor. Wenn Sie schon require verwenden, fügen Sie zumindest eine Typdeklaration hinzu:

interface Config {\n    apiUrl: string;\n    port: number;