TypeScript JSON Decode

What is it? Why does it matter?

ts-json-decode is a lightweight library (no dependencies) that allows complex data and strings decoding.

Most of front end applications must deal with data coming from, or going to, the outside. Whether these data are fetched from a server, retrieved from the local storage, or simply input by the user, they are all unsafe.

In TypeScript unsafe often means any, or, since TypeScript 3.0, unknown.

For example JSON.parse (which is widely used to parse data coming from a server) returns any. The solution then, in order to keep the illusion of "type safeness" is to blindly cast this any value into the desired type. TypeScript will joyfully compile, the developer enjoys that fancy autocompletion feature offered by TypeScript, and everything seems to be fine. Until the moment the data coming from the server changes.

Here is a simple example using the fetch API:

interface Resource {
  foo: string;
  bar: number;
}

async function fetchResource(): Promise<Resource> {
  const res = await fetch("https://my-server.com/resource");

  const data: Resource = await res.json();

  return data;
}

If https://my-server.com/resource returns a resource that differs from the Resource interface, a runtime error will occur, and it could be hard to debug. This can be a pragmatic, easy win, solution especially for tiny applications, with small, controlled, versioned, and slowly moving API, but scalability issues will araise quickly.

The target of ts-json-decode is to ensure type safeness with a simple yet complete API.

import { Decoder, decodeValue, num, object, str } from "ts-json-decode";

interface Resource {
  bar: number;
  foo: string;
}

const decoder: Decoder<Resource> = object({
  bar: num,
  foo: str,
});

async function fetchResource(): Promise<Resource> {
  const res = await fetch("https://my-server.com/resource");

  const data = decodeValue(decoder, await res.json());

  return data;
}

data will automatically be a valid Resource object. If something goes wrong, for instance if foo is missing, or if bar is a string, then an explicit error is thrown (and catchable with the catch method in the previous example).

Documentation

A full documentation can be found here.

API

Decoder runners

A Decoder is a simple function that will validate a data against a schema. In order to actually run the validation, two functions are provided: decodeValue and decodeString.

import { decodeString, decodeValue } from 'ts-json-decode';

import { decoder } from './myLibrary';

// `decodeValue` will decode (and validate) any kind of data structure
const data = decodeValue(decoder, { foo: "bar" });
// `decodeString` will parse and decode json stringified strings
const data = decodeString(decoder, '{ "foo": "bar" }');

If the runner can't decode the provided string/value, an error is thrown. You may easily wrap the code above in a Promise or an Observable.

Safe decoders

Are considered "safe", decoders returning value whose type is a proper TypeScript type or interface, without extra checks. For example str, num, or nil are all "safe", since string, number and null types exist in TypeScript.

import { decodeString, nil, num, str } from "ts-json-decoder";

const nilValue = decodeString(nil, "null");

const numValue = decodeString(num, "42");

const strValue = decodeString(str, '"foobar"');

Unsafe decoders

Are considered "unsafe", decoders returning value that cannot be completely type checked by TypeScript, mainly because of the limitations of the current TypeScript type system.

Most of the time, these decoders are strongly related to the concept of dependent typing. Hopefully, this concept could arrive one day in TypeScript.

They include decoders such as minLength or maxLength validating strings' length, or int validating that a number is an integer.

Additional tools

You may also map or compose decoders, allowing complex data to be decoded/validated and transformed on the fly. A field decoder also exist when you just need to read one attribute of an object.

import { decodeString, map, str } from "ts-json-decode";

// `decoder` has type `Decoder<number>` here
const decoder = map(({ length }) => length, str);

// `length` equals 6
const length = decodeString(decoder, '"foobar"');

Or using compose and map as well:

import { decodeString, compose, num, object, str } from "ts-json-decode";

const decoder = compose(
  map(({ length }) => length, str),
  map(x => x ** 2, num),
);

// `squaredLength` equals 36
const squaredLength = decodeString(decoder, '"foobar"');