JSON zu TypeScript
JSON-Daten automatisch in TypeScript Interfaces oder Typ-Definitionen konvertieren
// Nach JSON-Eingabe werden TypeScript-Typ-Definitionen automatisch generiertWas ist JSON zu TypeScript?
JSON zu TypeScript ist ein Werkzeug, das JSON-Daten automatisch in TypeScript-Typ-Definitionen konvertiert. Es analysiert die JSON-Struktur und generiert entsprechende Interface- oder Type-Deklarationen, die Typsicherheit und Code-Vervollständigung in TypeScript-Projekten bieten.
Verwendung
- JSON-Daten in das linke Eingabefeld einfügen oder Beispiel-Button zum Laden
- Optionale Einstellungen: Root-Typ-Name, Interface/Type-Stil wählen, Export hinzufügen etc.
- Rechts werden automatisch entsprechende TypeScript-Typ-Definitionen generiert
- "Kopieren"-Button klicken, um generierte Typ-Definitionen in die Zwischenablage zu kopieren
- Typ-Definitionen in TypeScript-Projekt einfügen und verwenden
Anwendungsbeispiele
Einfaches Objekt-Konvertierung
输入 JSON:
{
"name": "张三",
"age": 28,
"isActive": true
}
输出 TypeScript:
export interface Root {
name: string;
age: number;
isActive: boolean;
}Verschachteltes Objekt-Konvertierung
输入 JSON:
{
"user": {
"id": 1,
"profile": {
"avatar": "url",
"bio": "简介"
}
}
}
输出 TypeScript:
export interface UserProfile {
avatar: string;
bio: string;
}
export interface User {
id: number;
profile: UserProfile;
}
export interface Root {
user: User;
}Häufig gestellte Fragen (FAQ)
F: Wie werden generierte Typen verwendet?
A: Generierte Typ-Definitionen in eine .ts-Datei kopieren und im Code verwenden. Beispiel: const data: Root = JSON.parse(response)
F: Was ist der Unterschied zwischen Interface und Type?
A: Interface kann erweitert und implementiert werden, geeignet für Objekt-Typ-Definitionen; Type ist flexibler und kann Union-Typen, Schnitt-Typen etc. definieren. Für einfache Objekt-Strukturen sind beide funktional ähnlich.
F: Wie werden JSON-Arrays verarbeitet?
A: Das Werkzeug identifiziert automatisch den Array-Element-Typ. Bei Objekt-Arrays wird eine separate Typ-Definition für das Array-Element generiert, das Array wird als ItemType[] dargestellt.
F: Können generierte Typen bearbeitet werden?
A: Nach Generierung können sie frei bearbeitet werden. Es wird empfohlen, Typ-Namen nach Bedarf anzupassen, Optional-Felder-Markierungen (?) hinzuzufügen oder Typ-Definitionen einiger Felder zu ändern.