skip to content

Preserve Type Information during JSON Conversion in TypeScript

Learn how to use TypeScript's built-in features for type-safe JSON conversion in your project.

Introduction

TypeScript’s built-in support for generics and custom types makes it easy to create functions and types for converting values to and from string representations in a type-safe manner. In this blog post, we’ll explore how to use these features to simplify data serialization and deserialization in your TypeScript applications.

Type-safe JSON conversion refers to the process of converting values to and from string representations in a way that preserves their type information. This can be particularly useful if you are working with complex data structures that need to be serialized and deserialized in your applications as it allows you to ensure that the type of a value is correctly preserved

Code/TLDR

export function JsonToString<T>(json: T) {
  return JSON.stringify(json) as JsonString<T>;
}
 
export function StringToJson<T>(stringVal: JsonString<T>) {
  return JSON.parse(json) as T;
}
 
export type JsonString<T> = string & {
  [TYPE: symbol]: T;
};
export function JsonToString<T>(json: T) {
  return JSON.stringify(json) as JsonString<T>;
}
 
export function StringToJson<T>(stringVal: JsonString<T>) {
  return JSON.parse(json) as T;
}
 
export type JsonString<T> = string & {
  [TYPE: symbol]: T;
};

Functions

The JsonToString and StringToJson functions are two utility functions that you can use to perform type-safe JSON conversion in TypeScript. The JsonToString function takes a generic type T and a value of type T as its arguments and returns a string representation of the value. The StringToJson function takes a value of type JsonString<T> and returns the original value of type T.

// Define a value of some type
const value: SomeType = {
  field1: 'abc',
  field2: 123,
};
 
// Convert the value to a string representation
const jsonString = JsonToString(value);
 
// Convert the string back to the original value
const value2 = StringToJson(jsonString);
 
// value2 should now be of type SomeType
// and have the same value as the original value
// Define a value of some type
const value: SomeType = {
  field1: 'abc',
  field2: 123,
};
 
// Convert the value to a string representation
const jsonString = JsonToString(value);
 
// Convert the string back to the original value
const value2 = StringToJson(jsonString);
 
// value2 should now be of type SomeType
// and have the same value as the original value

Type

The JsonString type is a custom type that you can use to type a string as a JsonString<T>, where T is the type of the original value that the string represents. This allows you to retain type information when converting values to and from string representations.

Use cases

Type-safe JSON conversion can be useful in a variety of situations where you need to convert values to and from string representations. Some common use cases include storing complex data structures in a database, transmitting data over a network, serializing and deserializing data, and maintaining type information

Storing complex data structures in a database

You can use the JsonToString function to convert a value to a string representation before storing it in a database, and use the StringToJson function to convert it back to its original form when retrieving it from the database. This can be particularly useful if you are using a database that only supports storing simple data types like strings.

Transmitting data over a network

You can use the JsonToString function to convert a value to a JSON string before transmitting it over a network, and use the StringToJson function to convert it back to its original form on the receiving end. This can be useful for transmitting complex data structures between client and server applications.

Serializing and deserializing data

You can use the JsonToString and StringToJson functions to serialize and deserialize data, respectively. This can be useful for storing data on the client side (e.g., in a web browser’s local storage) or for transmitting data between different applications or environments.

Maintaining type information

The JsonString type allows you to retain type information when converting values to and from string representations. This can be useful for ensuring that the type of a value is correctly preserved through the conversion process, which can be important for maintaining the correctness and integrity of your application.