Live streamJoin us for "State of code review 2024" on July 18thRegister today

JSON and TypeScript conversion

Kenny DuMez
Kenny DuMez
Graphite software engineer

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.

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.

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:

Terminal
{
"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:

Terminal
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

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

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:

Terminal
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}

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"

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

Terminal
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.

Stay unblocked. Ship faster.
Experience the new developer workflow - create, review, and merge code continuously. Get started with one command.
Get started

Give your PR workflow
an upgrade today

Stack easier | Ship smaller | Review quicker

Or install our CLI.
Product Screenshot 1
Product Screenshot 2