Quelle est la difference entre optionnel (?) et nullable (| null) ?

Optionnel signifie que la cle etait absente sur certains items du tableau. Nullable signifie que la cle etait presente et que la valeur etait JSON null. email?: string autorise d'omettre le champ. note: string | null exige la cle. Ce convertisseur ne les fusionne pas en email?: string | null sauf si l'echantillon montre les deux.

Faut-il emettre interface ou type alias ?

Utilisez interface pour des formes d'objet que vous pourriez etendre ou fusionner entre fichiers. Utilisez type alias pour les unions, intersections et mapped types. Pour une reponse API typique les deux conviennent; cette page utilise interface par defaut car c'est le style TypeScript habituel pour les modeles JSON.

Pourquoi un champ est-il unknown[] ou Record ?

Un tableau vide n'a aucun element a inspecter, le repli est unknown[]. Un objet vide n'a aucune cle, le repli est Record . Collez un exemple rempli pour un type concret ou une interface imbriquee.

Est-ce un remplacement de quicktype ?

Non. quicktype.io couvre le codegen multi-langages et les validateurs runtime. Cette page est un convertisseur JSON vers interface TypeScript prive, cote client, pour un payload colle: pas d'install, pas de compte, et un rapport qui separe cles optionnelles et JSON null.

Mon JSON est-il envoye ?

Non. Parse et inference uniquement dans le navigateur. Sur pour les reponses internes, tokens et PII. Verifiez dans DevTools Network: convertir n'envoie aucune requete.

Puis-je generer des types depuis un tableau JSON ?

Oui, et vous le devriez quand les cles varient. Un tableau d'enregistrements est fusionne en une interface. Les cles manquantes deviennent optionnelles. Si vous nommez la racine Users, la sortie est interface User plus type Users = User[]. Si vous la nommez User, tapez le payload en User[].

Outils développeur

Convertisseur JSON vers interface TypeScript

Générez des interfaces TypeScript a partir d'un echantillon JSON dans le navigateur: pas de compte, pas d'envoi, pas de CLI de codegen.

Essayer un exemple

Echantillon JSON

La conversion s'execute dans votre navigateur. Le JSON ne quitte pas cet appareil.

Nom racine

Nom PascalCase de l'interface racine. Un tableau JSON nomme Users emet User plus type Users = User[].

Emettre comme

interface est la forme habituelle d'une reponse API et permet le declaration merging. type alias convient aux unions et mapped types.

Interfaces

Cles optionnelles

Cles nullables

Unions

? signifie que la cle manquait sur certains elements du tableau. | null signifie que l'echantillon contenait JSON null. Ce n'est pas la meme chose.

Notes d'inference

La racine JSON est un tableau. Tapez le payload en Root[] (ou l'alias de liste si vous avez utilise un nom pluriel).

User.lastLogin n'etait jamais que null. Ajoutez une vraie valeur dans l'echantillon pour inferer le type non nul.

Rapport des proprietes inferees
Interface	Cle	Type	Drapeaux
Address	city	string	requis
Address	postcode	string	optionnel ?
User	id	number	requis
User	name	string	requis
User	role	string	requis
User	email	string	optionnel ?
User	address	Address	requis
User	lastLogin	null	optionnel ? \| null
User	tags	string[]	optionnel ?

TypeScript

export interface Address {
  city: string;
  postcode?: string;
}

export interface User {
  id: number;
  name: string;
  role: string;
  /** Email string */
  email?: string;
  address: Address;
  lastLogin?: null;
  tags?: string[];
}

À propos de Convertisseur JSON vers interface TypeScript

Générez des interfaces TypeScript a partir d'un echantillon JSON dans le navigateur: pas de compte, pas d'envoi, pas de CLI de codegen. Collez une reponse d'API ou, mieux, un tableau d'enregistrements. Les objets imbriques deviennent des interfaces nommees, les tableaux sont types a partir de chaque element (pas seulement le premier), et les formes identiques sont dedupliquees. L'analyseur ne fusionne pas cles absentes et JSON null: une cle omise sur certains items est optionnelle (`?`); une cle presente mais null est `T | null`. Copiez le resultat dans un `.ts` ou telechargez-le. Associez-le au Minificateur JSON si le payload arrive minifie, ou au JSONPath Tester pour inspecter un champ d'abord.

Comment utiliser Convertisseur JSON vers interface TypeScript

Collez du JSON (un tableau d'enregistrements infere mieux les cles optionnelles qu'un seul objet). Chargez un exemple pour voir optionnel vs nullable.
Definissez le nom racine (User, Order, ApiResponse). Choisissez interface (defaut) ou type alias.
Lisez le rapport: nombre de declarations, cles optionnelles, cles nullables et unions. Les avertissements signalent tableaux vides, objets vides, champs uniquement null et cles citees.
Copiez le TypeScript ou telechargez un .ts. Placez-le dans types/ et annotez fetch / TanStack Query avec le nom racine.
Rien n'est envoye a un serveur. Un JSON invalide indique la ligne et la colonne.

Exemples de Convertisseur JSON vers interface TypeScript

Cle optionnelle depuis un tableau d'enregistrements

[{"sku":"A1","qty":2},{"sku":"B7","qty":1,"gift":true}] devient Order avec gift?: boolean. La cle est optionnelle parce que le premier item l'a omise, pas parce que la valeur etait null.

Nullable vs optionnel

Deux utilisateurs ou email manque sur une ligne et note est null sur l'autre emettent email?: string et note: string | null. Cles absentes et JSON null restent distincts; la plupart des convertisseurs les fusionnent.

Interfaces imbriquees nommees

{"user":{"address":{"city":"London"}}} emet Address, puis User, puis Root. Les objets imbriques sont nommes en PascalCase d'apres leur cle pour importer Address seul.

Cles citees et conteneurs vides

{"content-type":"application/json","items":[],"meta":{}} cite content-type, type items en unknown[] et meta en Record<string, unknown>. Les avertissements demandent un echantillon plus riche.

interface vs type alias

Gardez interface pour les formes de reponse API (declaration merging, erreurs un peu meilleures). Passez a type alias si le fichier contiendra des unions ou mapped types. Au runtime c'est identique.

Cas d'utilisation courants

Typer les reponses fetch() ou axios dans React, Vue ou Next.js
Generer des generiques TanStack Query / SWR a partir d'un vrai payload
Transformer un webhook (Stripe, GitHub, Slack) en evenement type
Creer des types pour une fixture avant qu'une spec OpenAPI existe
Convertir un blob de config JSON en TypeScript avec autocompletion

Questions fréquentes sur Convertisseur JSON vers interface TypeScript

Comment convertir du JSON en interface TypeScript ?: Collez un echantillon JSON, nommez la racine et copiez les interfaces. La conversion s'execute dans le navigateur. Les objets imbriques deviennent des interfaces nommees, les tableaux sont types a partir de chaque element, et les cles manquantes sur certains items sont marquees optionnelles avec ?.
Quelle est la difference entre optionnel (?) et nullable (| null) ?: Optionnel signifie que la cle etait absente sur certains items du tableau. Nullable signifie que la cle etait presente et que la valeur etait JSON null. email?: string autorise d'omettre le champ. note: string | null exige la cle. Ce convertisseur ne les fusionne pas en email?: string | null sauf si l'echantillon montre les deux.
Faut-il emettre interface ou type alias ?: Utilisez interface pour des formes d'objet que vous pourriez etendre ou fusionner entre fichiers. Utilisez type alias pour les unions, intersections et mapped types. Pour une reponse API typique les deux conviennent; cette page utilise interface par defaut car c'est le style TypeScript habituel pour les modeles JSON.
Pourquoi un champ est-il unknown[] ou Record<string, unknown> ?: Un tableau vide n'a aucun element a inspecter, le repli est unknown[]. Un objet vide n'a aucune cle, le repli est Record<string, unknown>. Collez un exemple rempli pour un type concret ou une interface imbriquee.
Est-ce un remplacement de quicktype ?: Non. quicktype.io couvre le codegen multi-langages et les validateurs runtime. Cette page est un convertisseur JSON vers interface TypeScript prive, cote client, pour un payload colle: pas d'install, pas de compte, et un rapport qui separe cles optionnelles et JSON null.
Mon JSON est-il envoye ?: Non. Parse et inference uniquement dans le navigateur. Sur pour les reponses internes, tokens et PII. Verifiez dans DevTools Network: convertir n'envoie aucune requete.
Puis-je generer des types depuis un tableau JSON ?: Oui, et vous le devriez quand les cles varient. Un tableau d'enregistrements est fusionne en une interface. Les cles manquantes deviennent optionnelles. Si vous nommez la racine Users, la sortie est interface User plus type Users = User[]. Si vous la nommez User, tapez le payload en User[].

Minificateur et formateur JSON

Minificateur et formateur JSON en ligne gratuits. Réduisez JSON pour réduire les charges utiles ou embellir (joli-imprimer) JSON avec une indentation de 2 espaces. Valide au fur et à mesure - aucun téléchargement requis.

Testeur JSONPath

Testez JSONPath en ligne dans le navigateur. Extraire un champ du JSON, essayer un filtre et copier les chemins normalises - rien n'est envoye.

Generateur de JSON Schema

Generateur de JSON Schema gratuit dans le navigateur. Collez un echantillon JSON, inferrez types et formats, et copiez un schema Draft-07 ou 2020-12. Rien n'est televerse.

Convertisseur JSON vers CSV

Convertissez JSON en CSV et CSV en JSON dans le navigateur. Aplatit les objets imbriques, desaplatit les cles a points au retour, NDJSON, preset Excel UE, RFC 4180. Rien n'est envoye.