Parse a JSON String in TypeScript

Use the built-in JSON.parse() method to convert a valid JSON string into a JavaScript value in TypeScript. The parsed value can be an object, array, string, number, boolean, or null, depending on the JSON input.

The basic syntax is:

</>
Copy
const result = JSON.parse(jsonString);

JSON.parse() checks the JSON syntax at runtime. If the string is malformed, it throws a SyntaxError. TypeScript type annotations do not validate the parsed data automatically.

Parse a JSON String into an Object in TypeScript

In this example, a JSON string containing two properties is parsed into an object. The values are then accessed with dot notation.

example.ts

</>
Copy
let jsonStr: string = '{"name":"TutorialKart", "property":"Website"}'
let jsonObj = JSON.parse(jsonStr)

let name: string = jsonObj.name
let property: string = jsonObj.property

console.log(name)
console.log(property)

The JSON property names and string values must be enclosed in double quotation marks. After parsing, jsonObj.name and jsonObj.property return the corresponding values.

Output

TutorialKart
Website

Parse JSON into a TypeScript Interface

You can assign the result of JSON.parse() to a variable declared with an interface type. This provides compile-time property checking while you write the rest of the program.

example.ts

</>
Copy
interface Website {
    domain: string;
    extension: number;
}

let jsonStr: string = '{"domain":"TutorialKart", "extension":"com"}'
let myWebsite: Website = JSON.parse(jsonStr)


console.log(myWebsite.domain)
console.log(myWebsite.extension)

The parsed JSON string is assigned to a variable with the Website interface type. Its properties can then be accessed using the dot operator.

However, an interface is removed during compilation and does not validate runtime data. In this existing example, the interface declares extension as a number, while the JSON contains the string "com". The assignment still succeeds at runtime because JSON.parse() returns an unvalidated value.

Output

TutorialKart
com

Parse JSON Safely with the Unknown Type

A safer pattern is to treat parsed JSON as unknown and inspect its structure before using its properties. This prevents the program from assuming that external data matches a TypeScript interface.

</>
Copy
interface Website {
    domain: string;
    extension: string;
}

function isWebsite(value: unknown): value is Website {
    if (typeof value !== "object" || value === null) {
        return false;
    }

    const website = value as Record<string, unknown>;

    return (
        typeof website.domain === "string" &&
        typeof website.extension === "string"
    );
}

const jsonStr = '{"domain":"TutorialKart","extension":"com"}';
const parsed: unknown = JSON.parse(jsonStr);

if (isWebsite(parsed)) {
    console.log(parsed.domain);
    console.log(parsed.extension);
} else {
    console.log("Invalid website JSON");
}

The isWebsite() function is a type guard. It confirms that the parsed value is a non-null object and that both expected properties contain strings.

Handle Invalid JSON with Try and Catch

JSON.parse() throws an error when the input contains invalid JSON syntax. Use a try...catch statement when the string comes from a user, file, API, local storage, or another source that may provide malformed data.

</>
Copy
const jsonStr = '{"name":"TutorialKart",}';

try {
    const parsed: unknown = JSON.parse(jsonStr);
    console.log(parsed);
} catch (error: unknown) {
    if (error instanceof SyntaxError) {
        console.error("Invalid JSON:", error.message);
    } else {
        console.error("Unexpected error while parsing JSON");
    }
}

The trailing comma after "TutorialKart" is not valid JSON, so the parser enters the catch block.

Parse a JSON Array in TypeScript

If the JSON text starts with an opening square bracket, JSON.parse() returns an array. You should still validate each array element before treating it as a specific TypeScript type.

</>
Copy
interface Course {
    name: string;
    lessons: number;
}

const jsonStr = `[
    {"name":"TypeScript","lessons":12},
    {"name":"JavaScript","lessons":15}
]`;

const parsed: unknown = JSON.parse(jsonStr);

if (Array.isArray(parsed)) {
    for (const item of parsed) {
        if (
            typeof item === "object" &&
            item !== null &&
            typeof (item as Record<string, unknown>).name === "string" &&
            typeof (item as Record<string, unknown>).lessons === "number"
        ) {
            const course = item as Course;
            console.log(`${course.name}: ${course.lessons}`);
        }
    }
}

Output

TypeScript: 12
JavaScript: 15

Convert JSON Date Strings into Date Objects

JSON has no dedicated date type. A date is represented as a string, so parsing JSON does not automatically create a JavaScript Date object.

</>
Copy
interface ArticleData {
    title: string;
    publishedAt: string;
}

const jsonStr = `{
    "title": "TypeScript JSON Parsing",
    "publishedAt": "2026-07-27T08:30:00.000Z"
}`;

const article = JSON.parse(jsonStr) as ArticleData;
const publishedDate = new Date(article.publishedAt);

console.log(article.title);
console.log(publishedDate.getUTCFullYear());

You can also use the optional reviver function of JSON.parse() when selected fields should be transformed during parsing.

</>
Copy
const jsonStr = `{
    "title": "TypeScript JSON Parsing",
    "publishedAt": "2026-07-27T08:30:00.000Z"
}`;

const article = JSON.parse(jsonStr, (key, value: unknown) => {
    if (key === "publishedAt" && typeof value === "string") {
        return new Date(value);
    }

    return value;
}) as { title: string; publishedAt: Date };

console.log(article.publishedAt instanceof Date);

Why JSON.parse Does Not Create a TypeScript Class Instance

JSON.parse() creates plain JavaScript objects. Assigning its result to a class type does not run the class constructor and does not add prototype methods.

</>
Copy
class User {
    constructor(
        public name: string,
        public role: string
    ) {}

    getLabel(): string {
        return `${this.name} (${this.role})`;
    }
}

const jsonStr = '{"name":"Alex","role":"Editor"}';
const data = JSON.parse(jsonStr) as { name: string; role: string };

const user = new User(data.name, data.role);
console.log(user.getLabel());

Create the class instance explicitly when you need constructor logic, private state, getters, setters, or instance methods.

Common TypeScript JSON Parsing Mistakes

  • Assuming a type annotation validates JSON: Interfaces and type assertions only affect compile-time checking.
  • Using properties before checking the parsed value: Treat external JSON as unknown and validate its shape.
  • Ignoring parse errors: Wrap untrusted JSON parsing in try...catch.
  • Expecting dates to become Date objects: Convert date strings explicitly or use a reviver.
  • Expecting class methods after parsing: Construct a real class instance from the parsed values.
  • Using invalid JSON syntax: JSON requires double-quoted property names and does not allow comments or trailing commas.

TypeScript JSON.parse Questions

What type does JSON.parse return in TypeScript?

In the standard TypeScript library definition, JSON.parse() returns any. For data from an external source, assigning the result to unknown and validating it is safer than using it directly.

Does JSON.parse validate a TypeScript interface?

No. TypeScript interfaces do not exist at runtime. A separate type guard, validation function, or runtime schema validator is required to verify the parsed data.

How do you catch invalid JSON in TypeScript?

Call JSON.parse() inside a try block and handle the thrown SyntaxError in a catch block.

Can JSON.parse return an array?

Yes. If the JSON text represents an array, the parsed value is an array. Use Array.isArray() to verify it before processing the elements.

Does JSON.parse convert date strings automatically?

No. Date values remain strings unless you convert them with new Date() or transform them with the JSON.parse() reviver function.

TypeScript JSON Parsing Review Checklist

  • Confirm that the source text contains valid JSON rather than JavaScript object-literal syntax.
  • Use try...catch when malformed input is possible.
  • Treat external parsed values as unknown until their structure is checked.
  • Verify required property names and runtime value types.
  • Check arrays with Array.isArray() and validate each element.
  • Convert date strings and other special values explicitly.
  • Create class instances manually when methods or constructor behavior are required.

Parse JSON Strings Reliably in TypeScript

In this TypeScript Tutorial, we learned how to parse a JSON string into an object or array, handle malformed input, validate parsed data with a type guard, convert date strings, and construct class instances from plain JSON values.