How to parse JSON string in Typescript?

In this tutorial, we will learn how we can parse a JSON string in TypeScript. The main reason for learning about it is to learn how we can explicitly type the resulting string to a matching type. The JSON.parse() method will be used to parse the JSON string by passing the parsing string as a parameter to it.

Syntax:

JSON.parse(parsingString);

We can type the parsed string with an explicit type using the following methods:

Typing parsed string using the type alias

The type alias will be used to define a new type with a mixture of different typed properties and can be used to type the parsed string.

Example: The below example will show how you can explicitly type the parsed string using type alias.

Javascript

const jsonStr1 =
    '{"name": "GeeksforGeeks", "desc": "A Computer Science Portal for Geeks"}';
const jsonStr2 =
    '{"name": "Google", "desc": "Searching Platform", "workforce": 2000}';

type parseType = {
    name: string,
    desc: string,
    workforce?: number,
};

const parsedStr1: parseType =
    JSON.parse(jsonStr1);
const parsedStr2: parseType =
    JSON.parse(jsonStr2);

console.log(`Company Name: 
            ${parsedStr1.name}, 
            Description: 
            ${parsedStr1.desc}`);
console.log(`Company Name: 
            ${parsedStr2.name}, 
            Description: ${parsedStr2.desc}, 
            Work Force: ${parsedStr2.workforce}`);

Output:

Company Name: GeeksforGeeks, Description: A Computer Science Portal for Geeks
Company Name: Google, Description: Searching Platform, Work Force: 2000

Typing parsed string using interfaces

The interfaces can also be used to type the parsed string to the required type as shown in the below example.

Example: This example shows the parsing of JSON string using interface.

Javascript

const jsonStr1 =
    '{"name": "GeeksforGeeks", "desc": "A Computer Science Portal for Geeks"}';
const jsonStr2 =
    '{"name": "Google", "desc": "Searching Platform", "workforce": 2000}';

interface parseInterface {
    name: string;
    desc: string;
    workforce?: number;
}

const parsedStr1: parseInterface =
    JSON.parse(jsonStr1);
const parsedStr2: parseInterface =
    JSON.parse(jsonStr2);

console.log(`Company Name: 
            ${parsedStr1.name}, 
            Description: 
            ${parsedStr1.desc}`);
console.log(`Company Name: 
            ${parsedStr2.name}, 
            Description: ${parsedStr2.desc}, 
            Work Force: ${parsedStr2.workforce}`);

Output:

Company Name: GeeksforGeeks, Description: A Computer Science Portal for Geeks
Company Name: Google, Description: Searching Platform, Work Force: 2000

Typing parsed array string

An array string can also be parsed using the parse method and required to be typed as an explicit array of required types.

Syntax:

const parsedString = JSON.parse(string) as createdType[];

Example: The below example will explain how to type an parsed array string.

Javascript

const jsonStr =
    `[
    {"name": "GeeksforGeeks", "desc": "A Computer Science Portal for Geeks"},
    {"name": "Google", "desc": "Searching Platform", "workforce": 2000}
]`;

type parsedType = {
    name: string,
    desc: string,
    workforce?: number
}

const parsedStr = JSON.parse(jsonStr) as parsedType[];

console.log(`Company Name: 
            ${parsedStr[0].name}, 
            Description: 
            ${parsedStr[0].desc}`);
console.log(`Company Name: 
            ${parsedStr[1].name}, 
            Description: 
            ${parsedStr[1].desc}`);

Output:

Company Name: GeeksforGeeks, Description: A Computer Science Portal for Geeks
Company Name: Google, Description: Searching Platform, Work Force: 2000

Typing parsed string using classes

Using classes is another effective way to parse JSON strings in TypeScript. We can define a class that represents the structure of the JSON data, providing type safety and better organization.

Example: Below is an example illustrating the parsing of a JSON string using a class-based approach.

JavaScript

class Company {
    name: string;
    desc: string;
    workforce?: number;

    constructor(name: string, desc: string, workforce?: number) {
        this.name = name;
        this.desc = desc;
        this.workforce = workforce;
    }
}

const jsonStr1 =
    '{"name": "GeeksforGeeks", "desc": "A Computer Science Portal for Geeks"}';
const jsonStr2 =
    '{"name": "Google", "desc": "Searching Platform", "workforce": 2000}';

const parsedStr1 = JSON.parse(jsonStr1);
const parsedStr2 = JSON.parse(jsonStr2);

const parsedCompany1: Company =
    new Company(parsedStr1.name, parsedStr1.desc);
const parsedCompany2: Company =
    new Company(parsedStr2.name, parsedStr2.desc, parsedStr2.workforce);

console.log(`Company Name: 
             ${parsedCompany1.name}, 
             Description: 
             ${parsedCompany1.desc}`);
console.log(`Company Name: 
             ${parsedCompany2.name}, 
             Description: ${parsedCompany2.desc}, 
             Work Force: ${parsedCompany2.workforce}`);

Output:

Company Name: 
             GeeksforGeeks, 
             Description: 
             A Computer Science Portal for Geeks
Company Name: 
             Google, 
             Description: Searching Platform, 
             Work Force: 2000