JSON and TypeScript conversion

As JSON (JavaScript Object Notation) is a standard data interchange format widely used in web applications, it's useful to use in TypeScript projects. This guide will explore various methods and tools to convert JSON to TypeScript interfaces and types, and vice versa.

Understanding the basics

Before diving into conversions, let's clarify some key terms and concepts:

• JSON: A lightweight data-interchange format that's human-readable while being easy to parse and generate for machines.
• TypeScript interface: A structure that defines the structure of an object. Interfaces in TypeScript are used to type-check whether an object fits a certain structure.
• TypeScript types: Additional types that TypeScript introduces like tuples, enums, and custom types which are not present in JavaScript.

JSON to TypeScript conversion

Converting JSON to TypeScript interfaces and types

One common requirement is converting JSON data structures into TypeScript interfaces or types, which can help in ensuring that the data conforms to a specified format.

Manual conversion

Here's a basic example of how you might manually convert a JSON object to a TypeScript interface:

Given JSON:

{
  "name": "John Doe",
  "age": 30,
  "isSubscriber": true
}

You could convert this to a TypeScript interface by manually creating a new TypeScript interface and then mapping each aspect of the JSON data object to a field in the interface:

interface User {
  name: string
  age: number
  isSubscriber: boolean
}

Automated tools

For more complex JSON objects, manual conversion can be tedious and error-prone. Tools like json2ts and quicktype can automate this process.

1. json2ts:

   • Go to json2ts.com and paste your JSON.
   • The tool generates TypeScript interfaces automatically.

2. quicktype:

   • Install quicktype using npm: npm install -g quicktype.
   • Use the command line to convert JSON to TypeScript:
     Terminal

     quicktype -s json -o MyInterface.ts --lang ts myData.json
     
     

JSON schema to TypeScript

If you have a JSON Schema, you can convert this to TypeScript types or interfaces to ensure your data adheres to a predefined schema.

• json-schema-to-typescript tool:
  • Install via npm:
    Terminal

    npm install -g json-schema-to-typescript
    
    

  • Convert a JSON Schema to TypeScript:
    Terminal

    json2ts mySchema.json -o myInterface.ts
    
    

TypeScript to JSON conversion

Generating JSON from TypeScript data structures

TypeScript data structures can be converted back to JSON, commonly when sending data from a web application to a server.

TypeScript object to JSON

To convert a TypeScript object to a JSON string, you can use the JSON.stringify() method:

interface User {
  name: string
  age: number
  isSubscriber: boolean
}

let user: User = {
  name: 'John Doe',
  age: 30,
  isSubscriber: true
}

let jsonString = JSON.stringify(user)
console.log(jsonString) // Outputs: {"name":"John Doe","age":30,"isSubscriber":true}

Converting TypeScript to JSON schema

To generate a JSON Schema from TypeScript types, tools like typescript-json-schema are very useful:

• typescript-json-schema:
  • Install via npm:
    Terminal

    npm install -g typescript-json-schema
    
    

  • Generate JSON Schema from TypeScript:
    Terminal

    typescript-json-schema "path/to/myFile.ts" "MyInterface" --out "mySchema.json"
    
    

Parsing TypeScript strings to JSON

To parse a JSON string in TypeScript, use the JSON.parse() method, ensuring that the output is typed correctly:

let jsonString: string = '{"name":"John Doe","age":30,"isSubscriber":true}'
let userData: User = JSON.parse(jsonString)
console.log(userData.name) // Outputs: John Doe

For further reading see the official TypeScript documentation.