How to parse a JSON string in TypeScript

avatar

Borislav Hadzhiev

Sat Mar 05 20222 min read

Parse a JSON string in TypeScript #

Use the JSON.parse() method to parse a JSON string in TypeScript, e.g. const result: Person = JSON.parse(jsonStr). The method parses a JSON string and returns the corresponding value. Make sure to explicitly type the result, which implicitly gets a type of any.

index.ts
const jsonStr = '{"id": 1, "name": "James", "salary": 100}'; type Person = { id: number; name: string; salary: number; }; // 👇️ const result: Person const result: Person = JSON.parse(jsonStr); // 👇️ {id: 1, name: 'James', salary: 100} console.log(result);

We used the JSON.parse method to parse a JSON string.

If you don't explicitly type the result, it gets assigned a type of any, which effectively turns off type checking.

index.ts
const jsonStr = '{"id": 1, "name": "James", "salary": 100}'; // ⛔️ const result: any (BAD) const result = JSON.parse(jsonStr);

You can also use a type assertion to set the type of the parsed value.

index.ts
const jsonStr = '{"id": 1, "name": "James", "salary": 100}'; type Person = { id: number; name: string; salary: number; }; // 👇️ const result: Person const result = JSON.parse(jsonStr) as Person; // 👈️ type assertion

If the value you are parsing is an array, type it as Type[], e.g. {id: number; name: string;}[].

If you are unsure whether a specific property will exist on the object, mark it as optional.

index.ts
const jsonStr = '{"id": 1, "name": "James", "salary": 100}'; type Person = { id: number; name?: string; // 👈️ optional property salary?: number; // 👈️ optional property }; // 👇️ const result: Person const result = JSON.parse(jsonStr) as Person; // result.name is string or undefined here if (typeof result.name === 'string') { // 👇️ result.name is string here console.log(result.name.toUpperCase()); // 👉️ "JAMES" }

We used a question mark to set the name and salary properties to optional.

If a property is set to optional it can either be of the specified type or have an undefined value.

Since the name property could have a value of undefined, we can't directly call the toUpperCase() method, because that could cause a runtime error.

In this case you should use type guards, which help you narrow down the type you're working with.

In our if statement, we check if result.name has a type of string, which means that the property is guaranteed to be a string in the if statement, and we can use string-specific built-in methods.

There is no way for you to validate if the type alias or the interface you've defined matches the parsed JSON value at runtime.

This is because type aliases and interfaces don't exist at runtime. TypeScript only helps us catch bugs during development.

For this reason, you should try and be as accurate (strict) with your type definitions as necessary.

For example, if a specific property might have multiple different types, use a union type.

index.ts
const jsonStr = '{"id": 1, "name": "James", "salary": 100}'; type Person = { id: number; name: string; salary: number | null; // 👈️ number OR null }; // 👇️ const result: Person const result = JSON.parse(jsonStr) as Person; // 👇️ result.salary is a `number` or `null` here if (typeof result.salary === 'number') { // 👇️ result.salary is a number here // 👇️ "100.00" console.log(result.salary.toFixed(2)); }

Union types are formed by combining two or more other types and represent values that may be any of the specified types.

Use the search field on my Home Page to filter through my more than 1,000 articles.