Convertire JSON in TypeScript: Generare tipi automaticamente

# Convertire JSON in TypeScript: Generare tipi automaticamente

TypeScript richiede definizioni di tipo per i tuoi dati JSON. Questa guida ti mostrerà come generare automaticamente interfacce TypeScript da JSON, risparmiando tempo e riducendo errori.

Perché convertire JSON in TypeScript?

Vantaggi Type Safety

const utente = JSON.parse(jsonString);
console.log(utente.nome); // ✅ OK
console.log(utente.nme);  // ❌ Typo, ma nessun errore!

interface Utente {
  nome: string;
  email: string;
  età: number;
}

const utente: Utente = JSON.parse(jsonString);
console.log(utente.nome); // ✅ OK
console.log(utente.nme);  // ❌ Error: Property 'nme' does not exist

Benefici

• Autocompletamento IDE - Suggerimenti intelligenti
• Refactoring sicuro - Trova tutti gli usi
• Documentazione automatica - Tipi come docs
• Catch errori compile-time - Non a runtime
• Performance migliore - Meno controlli runtime

Strumenti online

QuickType

• Multi-linguaggio (TS, C#, Go, etc.)
• Genera da JSON, JSON Schema
• Opzioni personalizzabili
• API disponibile

{
  "nome": "Marco",
  "età": 30,
  "indirizzo": {
    "città": "Roma",
    "cap": "00100"
  },
  "hobby": ["coding", "reading"]
}

export interface Utente {
  nome:      string;
  età:       number;
  indirizzo: Indirizzo;
  hobby:     string[];
}

export interface Indirizzo {
  città: string;
  cap:   string;
}

Transform Tools

• Interface mode
• Single file mode
• Configurable options
• Real-time preview

JSON2TS

• Paste JSON
• Get TypeScript
• Opzioni minime

VS Code Extensions

Paste JSON as Code

1. Apri VS Code
Ctrl+P
ext install quicktype.quicktype
Reload

• Windows/Linux: Ctrl+Shift+Alt+V
• Mac: Cmd+Shift+Opt+V

{
  "id": 123,
  "titolo": "Post di esempio",
  "autore": {
    "nome": "Laura",
    "email": "laura@example.com"
  },
  "tag": ["typescript", "json"]
}

export interface Post {
  id:     number;
  titolo: string;
  autore: Autore;
  tag:    string[];
}

export interface Autore {
  nome:  string;
  email: string;
}

JSON to TS

ext install MariusAlchimavicius.json-to-ts

• Click destro → Convert JSON to TS
• Opzioni configurabili
• Supporta commenti

CLI Tools

quicktype CLI

npm install -g quicktype

# Da file JSON
quicktype data.json -o types.ts

# Da stdin
echo '{"nome":"Marco"}' | quicktype -o user.ts

# Con nome tipo
quicktype data.json -o types.ts --top-level User

# Readonly properties
quicktype data.json -o types.ts --readonly

# Only types (no namespace)
quicktype data.json -o types.ts --just-types

# Multi-file
quicktype user.json -o types/user.ts product.json -o types/product.ts

{
  "scripts": {
    "generate-types": "quicktype data/.json -o src/types/generated.ts"

  }
}

npm install -g json-schema-to-typescript

json2ts -i schema.json -o types.ts

import { compile } from 'json-schema-to-typescript';

const schema = {
  type: 'object',
  properties: {
    nome: { type: 'string' },
    età: { type: 'number' }
  },
  required: ['nome']
};

const ts = await compile(schema, 'User');
console.log(ts);

import  as fs from 'fs';
import { quicktype, InputData, JSONSchemaInput } from 'quicktype-core';

async function jsonToTS(jsonString: string, typeName: string) {
  const jsonInput = new JSONSchemaInput();

  // Parse JSON
  await jsonInput.addSource({
    name: typeName,
    schema: jsonString,
  });

  const inputData = new InputData();
  inputData.addInput(jsonInput);

  // Generate TypeScript
  const result = await quicktype({
    inputData,
    lang: 'typescript',
    rendererOptions: {
      'just-types': 'true',
      'nice-property-names': 'true',
      'explicit-unions': 'true'
    }
  });

  return result.lines.join('\n');
}

// Uso
const json = fs.readFileSync('data.json', 'utf-8');
const types = await jsonToTS(json, 'ApiResponse');
fs.writeFileSync('types.ts', types);

Build pipeline

// webpack.config.js
const QuicktypeWebpackPlugin = require('quicktype-webpack-plugin');

module.exports = {
  plugins: [
    new QuicktypeWebpackPlugin({
      input: './data/.json',

      output: './src/types/generated.ts',
      lang: 'typescript'
    })
  ]
};

{
  "data": {
    "utenti": [
      {
        "id": 1,
        "username": "marco_dev",
        "profilo": {
          "avatar": "https://example.com/avatar.jpg",
          "bio": "Developer"
        },
        "createdAt": "2026-01-20T10:00:00Z"
      }
    ],
    "pagination": {
      "page": 1,
      "totalPages": 10,
      "totalItems": 100
    }
  },
  "status": "success"
}

export interface ApiResponse {
  data:   Data;
  status: string;
}

export interface Data {
  utenti:     Utente[];
  pagination: Pagination;
}

export interface Utente {
  id:        number;
  username:  string;
  profilo:   Profilo;
  createdAt: Date;
}

export interface Profilo {
  avatar: string;
  bio:    string;
}

export interface Pagination {
  page:       number;
  totalPages: number;
  totalItems: number;
}

async function getUsers(): Promise<ApiResponse> {
  const response = await fetch('/api/users');
  const data: ApiResponse = await response.json();

  // Type-safe access
  data.data.utenti.forEach(user => {
    console.log(user.profilo.bio); // ✅ Autocomplete!
  });

  return data;
}

{
  "app": {
    "name": "MyApp",
    "version": "1.0.0",
    "features": {
      "auth": true,
      "darkMode": false
    }
  },
  "database": {
    "host": "localhost",
    "port": 5432,
    "credentials": {
      "username": "admin",
      "password": "secret"
    }
  }
}

export interface Config {
  app:      App;
  database: Database;
}

export interface App {
  name:     string;
  version:  string;
  features: Features;
}

export interface Features {
  auth:     boolean;
  darkMode: boolean;
}

export interface Database {
  host:        string;
  port:        number;
  credentials: Credentials;
}

export interface Credentials {
  username: string;
  password: string;
}

// Uso type-safe
import configJson from './config.json';
const config: Config = configJson;

if (config.app.features.auth) {
  // Setup authentication
}

{
  "testCases": [
    {
      "name": "Valid user",
      "input": { "email": "test@example.com" },
      "expected": { "valid": true }
    }
  ]
}

interface TestFixture {
  testCases: TestCase[];
}

interface TestCase {
  name:     string;
  input:    Input;
  expected: Expected;
}

import fixtures from './test-data.json';
const data: TestFixture = fixtures;

data.testCases.forEach(test => {
  it(test.name, () => {
    const result = validate(test.input);
    expect(result).toEqual(test.expected);
  });
});

[
  { "type": "circle", "radius": 10 },
  { "type": "rectangle", "width": 20, "height": 10 }
]

// Auto-generated
type Shape = Circle | Rectangle;

interface Circle {
  type:   "circle";
  radius: number;
}

interface Rectangle {
  type:   "rectangle";
  width:  number;
  height: number;
}

// Uso type-safe
function getArea(shape: Shape): number {
  switch (shape.type) {
    case "circle":
      return Math.PI  shape.radius * 2;

    case "rectangle":
      return shape.width  shape.height;
  }
}

2. Optional properties

// Generated
interface User {
  nome: string;
  email: string;
  bio: string | null;
}

// Migliorato
interface User {
  nome: string;
  email: string;
  bio?: string; // Opzionale
}

3. Readonly

interface User {
  readonly id: number;
  readonly createdAt: Date;
  nome: string; // Modificabile
}

Best practices

1. Genera da schema quando possibile

✅ JSON Schema → TypeScript

❌ JSON instance → TypeScript

• Schema definisce tutti i casi
• Instance è un solo esempio
• Schema ha constraints

2. Organizza tipi in file dedicati

src/
  types/
    api.ts        # API types
    models.ts     # Domain models
    config.ts     # Config types
    generated/    # Auto-generated
      users.ts
      products.ts

3. Versiona tipi con API

// types/api/v1.ts
export namespace APIv1 {
  export interface User { ... }
}

// types/api/v2.ts
export namespace APIv2 {
  export interface User { ... }
}

4. Commenta differenze da JSON

export interface ApiResponse {
  // JSON: "2026-01-26T10:00:00Z"
  // Convertito in Date object
  createdAt: Date;

  // JSON può essere null
  description?: string;
}

5. Valida a runtime

import { z } from 'zod';

// Define schema
const UserSchema = z.object({
  nome: z.string(),
  età: z.number().min(0),
  email: z.string().email()
});

// TypeScript type da schema
type User = z.infer<typeof UserSchema>;

// Runtime validation
function parseUser(json: unknown): User {
  return UserSchema.parse(json); // Throws se invalido
}

Conclusione

• Online: QuickType.io
• VS Code: Paste JSON as Code extension
• CLI: quicktype per automation
• Runtime validation: Zod, io-ts

Generare tipi da JSON automaticamente ti risparmia ore di lavoro e previene innumerevoli bugs!