Index

JSON and TypeScript conversion

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.

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:

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 likejson2ts andquicktype can automate this process.

json2ts:
- Go tojson2ts.com and paste your JSON.
- The tool generates TypeScript interfaces automatically.
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
```
npminstall -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 theJSON.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}

Converting TypeScript to JSON schema

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

typescript-json-schema:

Install via npm:
Terminal
```
npminstall -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 theJSON.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