How to Parse JSON Strings in TypeScript

Product Support
, ,
#1

Is there a way to parse strings as JSON in TypeScript? For instance, in JavaScript, we use JSON.parse(). Is there a similar function in TypeScript for this purpose?

I have a JSON object string as follows:

{“name”: “Bob”, “error”: false}

How can I use TypeScript to parse this JSON string?

#2

As someone who’s worked quite a bit with TypeScript, I can tell you that TypeScript is essentially a superset of JavaScript, so when you’re looking to parse JSON strings, you can simply use JSON.parse() just as you would in JavaScript:

let obj = JSON.parse(jsonString);

However, the great thing about TypeScript is that you can add a type definition to the object being parsed. For instance:

interface MyObj {
    name: string;
    error: boolean;
}

let obj: MyObj = JSON.parse('{"name": "Bob", "error": false}');
console.log(obj.name);   // Bob
console.log(obj.error);  // false

This adds an extra layer of type safety, ensuring that the parsed object conforms to the expected structure, giving you access to better IntelliSense support in your IDE.

#3

since TypeScript is a typed language, leveraging type definitions like you’ve shown makes typescript parse json a lot safer. One thing I’d like to add is that if you need to validate the JSON structure before parsing, you can use libraries like ts-json-object. This way, you’re ensuring that your data complies with your expected schema.

For example:

import { JSONObject, required, validate } from 'ts-json-object';

class MyObj extends JSONObject {
    @required
    name!: string;

    @required
    error!: boolean;
}

const obj = MyObj.parse(`{"name": "Bob", "error": false}`);
console.log(obj.name);   // Bob
console.log(obj.error);  // false

Using this approach ensures the data structure matches what you’re expecting before you even parse it, which is especially useful in larger projects.

#4

I’d also like to introduce a more programmatic approach if you want even more control over the parsing process in typescript parse json. Sometimes, instead of relying on a library, you may want to define your own parsing logic to ensure your types are strictly enforced during the parsing process. Here’s a custom parse_json function:

function parse_json<T>(
    json: string,
    type_definitions: { [K in keyof T]: (raw_value: any) => T[K] }
): T {
    const raw = JSON.parse(json);
    const result: any = {};
    for (const key in type_definitions) {
        result[key] = type_definitions[key](raw[key]);
    }
    return result;
}

const obj = parse_json(
    '{"name": "Bob", "error": false}',
    { name: String, error: Boolean }
);

console.log(obj.name);   // Bob
console.log(obj.error);  // false

This approach gives you even more control over how each field is parsed, ensuring each property of the object is exactly what you expect it to be.